I am reading this tutorial about making draggable and resizable rectangles
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape
It is a good one and I want to create a similar one using images and this is what I had done
http://jsfiddle.net/LUhsK/2/
all i had done is to change the script that instead of drawing a square I draw an image given the image source, initial X, initial Y, width and height but as you can see it doesn't work. I really can't find what seems to be the problem
If I clearly understood what you are searching for I guess it can be easily resolved with
droppedElement = ui.helper.clone();
droppedElement.resizable();
Related
Ok lets say i have image and i want to rotate it along Y axis. Problem is i need to move my Y axis so rotation would be proper. I do my work in pure as3 code so this trick needs to be done in pure as3 code, so no flash drawing tools available :( .
here some images that may help you
LATEST EDIT: problem is solved with ez then i found that as3 actually also have 4x4 matrices that called Matrix3D in documentation , so now it possible to do all 3d rotations.
Answering your question without a code example is very hard. As I can see, your local position of the figure is somewhat different from what you intend it to be to rotate as desired.
Generally spoken, there are two potential issues to solve:
You may adjust your image's x and y values so that the image is always drawn as desired. So you need to add/remove an offsetX and offsetY variable to all your drawings of your image to fine-adjust it's local position.
If you use a rotation function with a matrix you should beware of the correct sequence. Rotation applies differently either when you apply translation before or after it.
Hope this may help you. If you want a more specific answer, you need to provide some code exampple.
I am slightly confused about the "correct" way in KineticJS to fill a shape with partial images (crops) from a combined image file (sprite).
Seems like one can either use fillPatternImage with a defined offset, which seems to draw the complete image, albeit with the rest of the image invisible. I only got acceptable performance after I moved those shapes to an extra layer as my sprite is relatively large and the impact of not cropping correctly decreased the fps dramatically.
All alternatives that I have found use the attribute "fill" with another attribute "image" in it, but this seems to result in black background every time.
Using an Image-shape would help, but is rarely usable since my shapes are seldom rectangular.
Since the KineticJS-documentation does not mention specifying crop coordinates ("just" offset, w/o width and height), what is the absolute correct way to do it?
The absolute "absolute correct way" would depend on the platform and your particular code, but.
Have you looked at sprites? http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-sprite-tutorial/.
To mask simple animated sprites I'd use this in adition of plain javascript after each draw.
context.globalCompositeOperation = 'destination-in';
The performance of drawImage with composite operations is better than drawing shapes manually on webkit, at least.
... and have all of its internal dimensions and interactions remain relative to each other?
For example, with Flash, you can create a movie and publish a .swf file. Then, when you put that .swf file in a page, you can have that movie scale up or down and still maintain all of its functionality with it being none the wiser.
Is something similar with Canvas? I was directed by someone else to the WHATWG description of the scale property, but it was not helpful. Does the scale property do what I want and does anyone have an example?
Thanks!
I once solved this by wrapping the Canvas API with functions that used proportional coordinates (ie. 0.3, mapped to 0-1, fixed ratio and other axis relative to this).
Depending on how much work you want to do, you might want to either implement something like this yourself or use some pre-existing solution.
I wrote a paint application using the HTML5 canvas element.
Now I want to give the user an option to zoom in and out while painting.
How can I do this?
There are a few ways. It really depends on what you're looking for.
You could do it by scaling the entire context, as in ctx.scale(2,2), and then redrawing everything at this larger scale. Several things drawn, like paths and text, will scale gracefully. To accomplish this you will need to keep good track of everything drawn so far.
Another way is to take the entire canvas and draw it back to itself. This requires a temporary canvas because the operation is really: Draw to temp canvas, clear main, draw back to main scaled.
Another way is to use CSS transforms to merely zoom the canvas itself, which will make the image blurry (its zoomed!) but does not require changing any of the pixels already on the canvas.
I'm working with a little project that I'm planning on using HTML5 in.
So far I've managed to set up a little demo with some small functionality, but it still lacks all functionality necessary. I hope that someone here might have some time to spare for a beginner.
Anyway, here's my demo:
http://persturesson.com/demo/
Right now, as you can see, the image (yup, it's an image and not a drawn object, the image will change for the final version so don't put to much intot that) is draggable. But I would like to be able to resize the image on the fly like this:
http://simonsarris.com/project/canvasdemo/demo2.html
Anyone that has an idea how to incorporate the functionality from this demo in mine?
All inputs are appreciated, thanks.
I wrote the demo you were looking at
So the relevant drawImage looks like this:
context . drawImage(image, dx, dy, dw, dh)
That's destination x, y, width and height. That means, regardless of the size of the original image, you can draw it larger or smaller onto the canvas. In my box example you change the width and height of fillRect, instead here you should just be changing the dw and dh values of drawImage.
So on line 32 of your transform.js file, instead of 150,150 for the dw,dh values, there should be the equivalent of a saved (and modified) width and height, just like in my demo.
Everything else (getting the handles to work, etc) should be pretty much the same.
If there are still any questions, let me know!