I want to make a simple image editor (drag, rotate, resize) in javascript. It has to work at tablet and mobile phones.
Fabric seems to be very fast. The only problem is that rotating / resizing don't work intuitive (sometimes you click and nothing happen). Does anybody know there is a solution for this in Fabric.
Or is there a other fast platform to create a fast editor
fabric example rotating resize
Related
We have been trying to build a map for a client where users can:
Use a joystick to navigate left and right
Zoom in/out on the canvas
Select a specific building and have that center align for them
Everything works great on a PC but when we try to use an iPad 2 problems happen:
The screen becomes quite shaky
When you zoom in on the screen the quality of the map drops, even though the map is over 10mb and the quality is good for some reason it becomes pixelated.
URL: http://bit.ly/1MDcVhV
Does anyone have experience with such problems.
Thanks.
I have this tetris game I programmed with the intention of learning a bit more on javascript: elcodedocle.github.io/tetrominos
I can play it in most tablet/smartphone browsers, but on my Android 2.3.6 stock browser (Samsung Galaxy Ace ST5830) it has two problems:
Zoom events are not exactly canceled by user-scalable=no viewport property: double click and two-finger zooming still work. Sometimes.
The canvas freezes, also sometimes (I'm going mad trying to determine the cause: How the heck you debug a web app running on an android browser??). I'm guessing because of a swipe or drag event triggered that shouldn't be, so it's somehow related to the above. Tapping out of the canvas makes it work again.
I'm using Kineticjs to manipulate the canvas and bind the touch events, on top of jquery-ui for the dialogs and jQuery (not jQuery mobile).
Any suggestions/ideas?
the problem is with the device's processing speed.. evrery device has its own processing speed. canvas animations are based on javascript's setInterval and setTimeout methods..which performs as per the device's processing speed..thats why canvas games are sometimes laggy on handhelds.
I'm developing a webportal and I would to make a webpage that support pen touch to draw sketch directly in the browser.
I thought about Canvas and Javascript or JQuery with php to store the image on the webserver. and I tested few examples that I found online without success.
Some examples works better than other. Opera probably is more complete to manage canvas than Chrome but the problem is always to exclude the finger touch if I'm using the pen.
Anyone have idea or suggestion about drawing with pen in a browser with a mobile device that support pen gestures (like Samsung Note or similar)?
Use jquery events:
Ontouchstart -> You should start a timer here.
Ontouchmove -> Gives you the x and y value of the movement in px.
Ontouchend -> If very short and you have not moved an x amount of pixels in horizontal or vertical directions, it is a click. You can also sync the changes with your db here.
Those are just one of the many things you can do with the three touch events.
I am having a redraw issue, when you are scrolling the canvas will not redraw until you release your touch. The problem with that is I depend on "ontouchmove" to move my character around. So until the touch is release, the canvas will not redraw.
Another problem is when ever the canvas is touched it is focus, or activated. It develops a focus ring around it. I tried setting both the :focus and :active pseudo's borders and outlines to nothing. Also I saw "drawFocusRing" for the context of the canvas, however that didn't seem to resolve the issue.
Currently I tested on Android stock browser 2.2 (MyTouch 3G)
I believe the orange focus ring is more in relation to the WebView you are using to view the canvas maybe? I know I had a similar issue with js drawing on a canvas.
myWebView.setFocusable(false)
myWebView.setFocusableInTouchMode(false)
Should solve the focus problem.
I don't know about Android specifically, but in mobile Safari you can prevent scrolling using the event.preventDefault() method. If your application requires scrolling, it might be possible to implement your own scrolling mechanism whilst still preventing the default behaviour, maybe by combining touch events with CSS positioning on a page wrapper div?
I've been testing out the new functionality of html5 and js to create a sketching site. I've been looking into this for a possible client that wants their site to be ipad accessible, but also have drawing features on it.
So i created a rough experiment where you can drag your mouse across a screen to draw lines. I went to test it on an ipad and realized this doesn't work. Why? because dragging on an ipad is reserved for actually dragging the screen around.
Is there something you can do to get around this? I'm sure this could be done if made for an app, but what about just a normal website.
In your code, replace your events like that:
onmousedown => ontouchstart
onmousemove => ontouchmove
onmouseup => ontouchend
At least that is how it works on iPhones. Further reading: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Shameless self promotion - I developed a jQuery plugin for drawing on a website via HTML5 for the purpose of collecting signatures on the iPad screen. http://www.crowdsavings.com/open-source/drawbox