avokicchi / jquery-drawr Goto Github PK
View Code? Open in Web Editor NEWJQuery dRawr is a jquery plugin to turn any canvas element into a drawing area with a lot of useful tools and brushes.
License: MIT License
JQuery dRawr is a jquery plugin to turn any canvas element into a drawing area with a lot of useful tools and brushes.
License: MIT License
Just a matter of drawing canvasses on top of eachother. maybe use offscreen canvas.
Could even implement a couple of blend modes like lighten, multiply, darken using whatever we can support with globalCompositeOperation.
Given that we're talking about webbased stuff and mobile support, maybe have a sanity limit of like three layers max.
Drawing positions of marker-like tools are off when running canvas in modal
Events are currently not namespaced, that's sloppy
right click or multi touch drag should move canvas.
Implement faux scrolling with css translations.
Ignore multitouch when drawing with pen, if it is possible to detect the difference between a wrist touch/pencil draw.
Some pointers here. https://stackoverflow.com/questions/34986373/javascript-touch-event-distinguishing-finger-vs-apple-pencil
Ability to maximize to fullscreen (using a tool - so optional)
It seems drawEnd is never called, or at least plugin.record_undo_entry is never reached. some remote debugging is needed.
it initializes as black.
On desktop it works. On mobile, it works too, but for every 10 pixels scrolled vertically, only 5 seem to happen. Might have to do with cancelled touchmove events and the odd behaviour of rubberbanding on the whole page. maybe I can catch that with document.body.scrollTop and use that as adjustment or something, if that is the case. testing is needed.
testing needed with force values on iPad - oddly enough the fairphone 3 reports working "force" values as well, but they are unusably low. maybe this is standard? in that case I can multiply and implement.
//TODO: add support for 3D touch of apple and other devices (oddly enough, the fairphone 3 seems to support this) /*if(typeof event.originalEvent.touches[0].force!=="undefined" && force > 0){ this.pen_pressure=true;//this works, but at least on fairphone, the values are too low. testing needed on iOS devices. }*/
You could use this to create simple networking functionality, I don't know, seems useful.
canvas outlines are misplaced when running canvas in modal.
within a table this issue is even worse.
Like, effects, which would then offer: lighen, grayscale, etc
take the first demo on https://rawrfl.es/jquery-drawr/ . it keeps drawing on top of the active canvas without clearing it first. because of the clear on init setting being active.
Hey, I'm trying to use this app in a modal on my page but when I do it, it definitely goes crazy with where I'm clicking and where it's drawing. It is something that would match my expectations so if there's any solution that I can apply, I want to know.
There are left and top parameters for many things in code but not every one of them works okay after I change their left-top value to x-left
which left
in that line is the left offset of my modal body. Pencil works fine now but it goes crazy when I try to use zoom.
Helpp please
To easier debug modal issues
for others and my future self's sanity
If we zoom out in mobile device and adjust image using mdi-cursor-move Tool from tool bar.
Image is disappear from editor.
Can any please help on this
reproduce, draw 6 text strings, press undo once, they all dissapear.
zip file and website files on the package is kinda dumb and takes unneeded space. instead, create a tests folder, make some seperate demos in there for developers
implement several things (using dropdown)
canvas options: flipx, flipy, rotate, adjust size, crop, background (drop alpha channel)
effects: blur, sepia, grayscale
tools: flood fill, smudge, redo
polygon/rectangular selection
Maybe adjust the default to only have a very small subset of these enabled.
Steps to reproduce, draw some, then draw with marker tool, then undo, then draw some, then undo - it seems to undo multiple steps at once.
If you scroll the text placement indictator doesnt move along. to fix this, i need a new brush event for when the scroll pos changes. and hide the text thinger on scroll.
Ability to pass an array of tools, as well as having a default toolset rather than loading them automatically
additionally, making ALL tool buttons configurable, currently zoom and undo are not removable
this requires updating all examples
if you scribble with pen, then scribble some with touch, it ignores the first few as expected, but then draws a straight line from the last pencil position to the new touch position.
inactive/outside drawing bounds area should be gray, probably. on small images especially it is unclear where the bounds are.
zooming needs to adjust the scroll position so you keep looking at the same section of the canvas at least on the top left, every drawing program does that.
I was trying to implement it but found this bug.
My HTML structure is tables based and DIVs have been nested within TDs.
Now say I am trying to implement this at 3rd row i.e 3rd TR.
First, 2 rows have already taken some height, assume some 400px!
So, this drawing tool starts from 400px, and there I found the issue.
I have managed to set the CANVAS, TOOLs everything, but once I tried drawing something, that didn't happen!
So, I started scratching the reason and I found the mouse events have been starting from 0,0 of the parent instead of 400,0. Or better to say, mouse events don't work at the 3rd TR or the CANVAS I had put inside.
Let me know if it's not clear!
Hi,
Would be really nice to see this lib on npm.
can anybody tell me how to clear whole canvas drawings without calling destroy in function?!
drawing is kinda messed up due to pressure value. It's like that phone always pretends to be a stylus with low pressure. not sure. investigate.
even when drawing, the cursor seems struck on move
should unbind events, remove components, undo css changes, etc
the features, options, etc.
Since last update all positioning might be right, but if you scroll to the right, it doesn't let you start draw events for some reason.
will fix this later today, should be simple. In order to debug this better, make some indicator that the drawing area is active. change the grid lines color to highlighted, maybe?
Hi,
Hope you are doing well.
I want image rotate tool in our plugin
An actual decent color picker is needed. Since I don't wanna include another library because of where I'm using this library, I'll have to make something myself.
Preferrably something like this: https://i.imgur.com/qTMpBqt.png
a three item undo buffer should be fine for most purposes
the fake scrollbars are incorrect in height and position, and completely break when you zoom.
Pinch to zoom on mobile, dragging with two fingers
All the TOOL items are buttons and the same have been creating an issue.
Say I have a field marked as 'required'. If I choose/click any of the TOOL, the browser pops up the required message for that field.
Using https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent ? Maybe? Testing with my tablets is needed.
The button on all the examples and the website don't work.
Hello!
First of all, congratulations @lieuweprins for the pluguin, it is awesome and help me a lot.
I used it in a web aplication that I need it can be used by mobile devices. The problem is that seems the plugin is blocking the links and the button of the page... It is rare, you can see it by watching your own web demo (https://rawrfl.es/jquery-drawr/ ) in a mobile device or by toogle device toolbar inside de F12 mode of Chrome. Click in "Download" or "View on github" or the links in the page and you will see it.
Do you know why is this happening?
Thanks you in advance!
Support galaxy note pencil
Steps to reproduce a bug:
Expected result:
Filled (black) square should be visible in the canvas.
Actual result:
No filled square is visible after your release mouse. Instead, filled square tool functions as an eraser.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.