I'm messing around with HTML5 canvas and clipping. I am wondering how I can get the user to click on the canvas, have it clip a circle, and then repeat. So essentially, the user can click multiple times and there will be multiple clips.
I tried a couple solutions that were slightly similar to what I want but it isn't working.
Here is the clipping code:
context.save();
context.beginPath();
context.arc(mouseX,mouseY,50,50,Math.PI*2,true);
context.globalCompositeOperation = 'destination-out';
context.clip();
context.closePath();
var img = new Image();
img.src = canvasSnowflake.toDataURL();
context.drawImage(canvasSnowflake, 0, 0);
context.restore();
you can view the entire thing in action here: http://jsfiddle.net/cnbishop/8FzuB/. right now you can click one time and the clip works, but you can get a new clip if you click on the canvas again. Is this even possible?
Everytime the user clips you'll need to save this action somehow in JS. Next time the user clicks, you retrieve the past clipping, apply it and then apply the new clip action.
Basically, you need to reapply all the clipping actions in the history in the same order as they were executed as Canvas is unable to "remember" its previous rendering.
Did I interpret your question correctly?
Related
I am developing a coloring game using adobe air and as3. I have an image with black outline and the user can draw / color the image using a pen tool. I need help to figure out how can I restrict the user to draw within the outlines only. Masking the image with the line-graphics is something I have tried but it hangs the application. Any hint / suggestion towards the solution is appreciated.
following is the code on mouse_down event
_dot = new MovieClip();
_dot.graphics.lineStyle(lineSize, color);
_dot.graphics.moveTo(img.mouseX,img.mouseY);
img.addChild(_dot);
Let's say, the area you are drawing on is a DisplayObject with an instance name of Canvas. What you need is to check if the mouse is on Canvas or not.
In order to do so, you want to use the DisplayObject.hitTestPoint(...) method with the shapeFlag set to true (if it is false, it tests the point against the object's rectangle bounding box, which would produce the wrong results for any non-rectangular or rotated shapes).
So, you do as following:
var P:Point = new Point;
// First, convert coordinates to Stage coordinates,
// because the method requires so.
P.x = Canvas.mouseX;
P.y = Canvas.mouseY;
P = Canvas.localToGlobal(P);
// Now, test if the mouse is within the given canvas.
if (Canvas.hitTestPoint(P.x, P.y, true))
{
// The drawing should happen here.
}
I want to dynamically change the shape of a shape in as3. Say for example, on clicking and dragging on shape square the shape should change according to my mouse movement, direction. I have pasted a link below which display my requirement, selecting one shape and edit edges option, then click the shape and drag, the shape will change according to mouse movent and direction based on some math calculation. Is that possible in AS3.
http://www.shodor.org/interactivate/activities/Tessellate/
Yes, it is possible to make this type of programs.
I suggest you looking into Sprite's graphics object. It has the API to draw primitives, lines and curves.
The reason why you should use Sprites in this case is because it extends InteractiveObject => they support user input, like mouse or touch inputs.
Here's an example of creating triangle:
var s:Sprite = new Sprite();
s.graphics.lineStyle(1, 0x000000); // optional
s.graphics.beginFill(0xff0000); // optional
s.graphics.lineTo(0, 100);
s.graphics.lineTo(100, 100);
s.graphics.lineTo(0, 0);
s.graphics.endFill();
addChild(s);
You can combine mouse events to track input and event ( enter frame in particular ) to redraw your shape depending on the mouse position.
To redraw the shape, you might want to call graphics.clear() method on that object to erase it from the screen.
Hi this kills me :) I am using senocular for as3 move,rotate,scale,skew loaded image into MC and works great, but spent a lot of time, can't find nice solution for cropping such MC (with loaded image) with mouse. Do someone have solution (code) for this?
To display the cropped area, all you need to do is apply a mask, which is just another Display Object.
I haven't used Senocular's code for this, but if you make the mask the target of his move / scale code, then you can easily implement cropping. There's plenty on masking in the Adobe docs: http://livedocs.adobe.com/flex/3/html/help.html?content=05_Display_Programming_28.html
In practice, you have to hide the resize / move controls when cropping, and vice-versa, which is why tools like Flash itself, or Photoshop, have separate transform and crop modes.
From Senocular's docs:
// import for the Transform Tool classes used
import com.senocular.display.transform.*;
// create a box object to interact with
var box:Sprite = new Sprite();
addChild(box);
box.graphics.beginFill(0xAACCDD);
box.graphics.drawRect(-50, -50, 100, 100);
box.x = 100;
box.y = 100;
// create the Transform Tool
var tool:TransformTool = new TransformTool(new ControlSetStandard());
addChild(tool);
// select the box with the transform tool when clicked.
// deselect when clicking on the stage
box.addEventListener(MouseEvent.MOUSE_DOWN, tool.select);
stage.addEventListener(MouseEvent.MOUSE_DOWN, tool.deselect);
Just do this, but box needs to be the mask of your movie clip, so that when you resize it, you will crop the movie clip.
I've seen other posts about this but I can't find anything to help me out.
I'm drawing an image on the canvas which moves, when it moves it leaves a trail of itself behind which hasn't been cleared. If I draw this image on top of another I get no trail but the image on top flickers. I don't think clearRect will work for me.
Can I save the canvas state between the image animation? Or should I be using a second canvas?
I'm not quite sure how to proceed, any advice would be great
* added examples - jsfiddle.net/zE67k/2 with an image and flicker. jsfiddle.net/zE67k/3 without an image and trail. this is just an example, I'm trying to achieve this with a background image to the canvas also.
* I also tried placing one canvas on top of another and I still get the flicker, I think the problem is where I place the clearRect. It does work if I put the clearRect just before the eye is drawn, but the way this code draws and updates the eyes does so one at a time, therefore the previous eye is cleared leaving only one. I'm trying it from this tutorial http://astronautz.com/wordpress/html5-eyes-that-follow-the-mouse/
You should save the clean canvas before drawing the other image ontop and restore that saved clean state before drawing the moved image again. You can use an additional canvas to save a clean state:
// create clean buffer
var buffer = document.createElement('canvas'),
canvas = document.getElementById('myCanvas');
buffer.width = canvas.width;
buffer.height = canvas.height;
// draw "background"/clean state to canvas
drawBackground(canvas);
// save clean state
buffer.getContext('2d').drawImage(canvas);
Then whenver you want to draw / move your other image/item simply restore the clean state:
canvas.getContext('2d').drawImage(buffer);
drawObject(canvas, x, y, w, h);
I have a canvas element with a photo loaded on it. When clicking a link, the following is performed:
var ctx = canvas.getContext("2d");
ctx.scale(-1,1);
ctx.drawImage(canvas, canvas.width * -1, 0, canvas.width, canvas.height);
This works as expected (the image is flipped horizontally) on the first click, the third click, the fifth click, etc. On the second click, the fourth click, the sixth click, etc, nothing happens.
Any ideas on how I can get this to work for every click?
Yeah, the problem is because you're not restoring the canvas scale to 1,1 after you draw the image, so basically the first time the event is called your canvas scale is gonna be turned into -1,1 the next time it's gonna be 1,1 but you need it to be always -1,1. That's because you're drawing the image directly from the canvas and not from an image element thus, you gonna need to flip it every time.
Try using ctx.save() before the scaling and ctx.restore() after drawing the image. Or calling ctx.scale(-1, 1) again after drawing the image. Or you could just do the scaling outside the event (but after you've drawn the image to the canvas the first time) if your canvas is only used for this.
This here works for every click:
http://jsfiddle.net/4kcjn/2/
Ask yourself, what is different between it and yours?
It could be image-load related. Try yours without an image. Does it still have the same problem?