I want to resize and slowly growing size canvas element (like a arc) on the mouseover event. How can I do this?
mouseover on the canvas itself? Just add an event listener and redraw the scene the way you want:
// Every time the mouse comes over the canvas the radius increases.
// you could even add a timer so that every time the mouse stays over
// the canvas the radius continues to increase constantly
can.addEventListener('mouseover', function(e) {
radius += 10;
ctx.clearRect(0,0,can.width, can.height);
ctx.beginPath();
ctx.arc(150, 150, radius, 0, Math.PI*.8, false);
ctx.stroke();
}, false);
http://jsfiddle.net/dAQdL/
mouseover an "object" drawn on the canvas? You're gonna have to add object persistence and detection to the canvas.
Related
I'm building a rich media Flash banner ad. I have 3 to 4 round MovieClip buttons that move around with an AS3 parallax effect. It looks like an EnterFrame loop creates the effect in AS3. But the individual Movieclip buttons won't function when I assign MouseEvent Click events. I want the parallax movement to stop and playhead advance to a specific label on main timeline when the MC's are clicked.
I'm sure this can be done but I lack the expertise. Here is the code:
//add an event listener to trigger every frame
addEventListener(Event.ENTER_FRAME, onFrame);
//set a constant that marks the centre of the stage
//the stage is 600 x 400, so we halve that
const stageCentre:Point=new Point(180,300);
//set an easing constant
const ease:Number=0.2;
function onFrame(e:Event) {
//create a point to store the distances the mouse is from the centre
var mouseOffset:Vector3D=new Vector3D(stageCentre.x-mouseX,stageCentre.y-mouse Y, 0);
//move each background layer by a different percentage of offset
//the easing constant is used here to create smoother results
//foreground moves the most; 75% of the mouse offset
clip1_mc.x+=(stageCentre.x+mouseOffset.x*0.70 - clip1_mc.x)*ease;
clip1_mc.y+=(stageCentre.y+mouseOffset.y*0.50 - clip1_mc.y)*ease;
//mid-ground moves a medium amount; 50% of the mouse offset
clip2_mc.x+=(stageCentre.x+mouseOffset.x*1.00 - clip2_mc.x)*ease;
clip2_mc.y+=(stageCentre.y+mouseOffset.y*1.00 - clip2_mc.y)*ease;
//background moves the least; 25% of mouse offset
clip3_mc.x+=(stageCentre.x+mouseOffset.x*1.75 - clip3_mc.x)*ease;
clip3_mc.y+=(stageCentre.y+mouseOffset.y*1.00 - clip3_mc.y)*ease;
}
//Click on button to go to and Play "kelsey" label (this does NOT work)
clip1_mc.kelsey_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
MovieClip(root).gotoAndStop("kelsey");
}
Make sure the clip1_mc is on the top most layer, it is probably overlapped by other clips that are catching up the mouse click events.
If you have buttons in all layers you will need to disable mouse events for everything except the buttons. For example, if you have a "button" and a "background" in each movieclip and you want to only keep the buttons clickable, do something like this inside of that movieclip:
background.mouseEnabled = false;
background.mouseChildren = false;
This way the background will not listen for any mouse interactions
add removeEventlistener when the mouse clicks the movieclip
clip1_mc.kelsey_btn.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
this.removeEventListener(Event.ENTER_FRAME, onFrame);
MovieClip(root).gotoAndStop("kelsey");
}
I have this weird issue where setting up multiple clip rectangles in HTML5 causes the drawing to bleed/overlap into the previous clip boxes, even when each one is contained in a ctx.save() - ctx.restore().
Here is the code example:
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// 1st clip
ctx.save();
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.clip();
// draw red rectangle after 1st clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,300,140);
ctx.restore();
// 2nd clip
ctx.save();
ctx.rect(140,20,100,100);
ctx.stroke();
ctx.clip();
// draw blue rectangle after 2nd clip
ctx.fillStyle="blue";
ctx.fillRect(0,0,300,140);
ctx.restore();
And a jsfiddle:
http://jsfiddle.net/4eXw9/1/
Is there a way to stop a clip call from bleeding/overlapping previous clips?
You are missing a beginPath() on the second clip:
// 2nd clip
ctx.save();
ctx.beginPath()
ctx.rect(140,20,100,100);
ctx.stroke();
ctx.clip();
Modified fiddle
What happens is that your new rect is merged with the first one since stroking/filling does not clear the path - so both are stroked/filled again. To clear the path you must explicitly clear it using beginPath(). As the path also is the basis for clip()..
I have a bitmapdata which contains two colors in it say black and white. Now the black area is transparent and the white area is visible. Now the image should be clickable only on the white areas and not on the black transparent area. How can we do this?
PS: The white areas are not in a regular locations I mean they are in random locations.
//add listener for mouse clicks
stage.addEventListener(MouseEvent.CLICK, eventHandler);
function eventHandler(event:MouseEvent):void
{
//1x1 bitmapData to store snapshot
var bmd:BitmapData = new BitmapData(1, 1);
//matrix object to 'move' stage so that pixel under mouse is effectively at 0,0
var matrix:Matrix = new Matrix();
//'move' stage according to mouse x,y values
matrix.translate(-event.stageX, -event.stageY);
//take snapshot of stage
bmd.draw(stage, matrix);
//get colour from snapshot data
var pixel:uint = bmd.getPixel(0, 0);
//trace result
trace("colour = "+pixel.toString(16));
}
Taken from http://blog.leeburrows.com/2011/06/get-pixel-colour-below-mouse-pointer/
Edit because I have time:
So in your case, instead of:
trace("colour = "+pixel.toString(16));
You would use:
if(pixel.toString(16) == "ffffff") // if clicked pixel is white
{
//do something
}
Sam's answer is great, but since you say you know that the pixel in question is part of a bitmapdata you could skip taking a snapshot of the stage and just check the bitmapdata directly instead. I think it could be as simple as:
stage.addEventListener(MouseEvent.CLICK, eventHandler);
function eventHandler(event:MouseEvent):void
{
if (myBitmapData.getPixel(event.stageX, event.stageY) == 0xffffff)
{
// do something
}
}
Also if you want to take alpha into consideration you will want to use getPixel32() instead of getPixel().
I have a slight problem here I try to solve. As I start to do animation with HTML5 and Canvas I want to have a constant animation flow and also be able to capture mouse movement without interrupting the animation flow. This right now seems like a problem. Ill bring
some code from my test code here.
function mainInit()
{
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
ballArray.push(new Ball(30,30,2,4,15,"#EEEEEE"));
setInterval(drawScene,20);
}
function drawScene()
{
// main drawScene function
clear(); // clear canvas
// draw animated objects
for(var i = 0; i < ballArray.length; i++)
{
ballArray[i].draw();
}
Event_MouseMove();
}
var messageMousePos = '';
function Event_MouseMove()
{
canvas.addEventListener('mousemove', function(evt)
{
var mousePos = getMousePos(canvas, evt);
messageMousePos = "Mouse position: " + mousePos.x + "," + mousePos.y;
context.font = '10pt Calibri';
context.fillStyle = 'black';
context.fillText(messageMousePos , 5, 15);
}, false);
}
The problem is that when I move the eventListner for mouse movement overrides the draw interval and makes it go much slower. How/where should I put the code for the mouse event so it do not interrupt this draw interval, but still draw the mouse events according to the interval?
At a glance, it looks like the code will try to add an event listener every frame...While JS will dump duplicate handlers, it will slow your code down. It's unclear whether you are trying to only capture mouse movement every interval, or constantly, because your code is kinda trying to do both. Here's the best of both worlds solution:
Call addEventListener once outside the loop, and have the function it calls save the mouse position in messageMousePos. Then, within the drawScene function, put your font/fillstyle/filltext code if you really do only want the text outputting every 20ms. This might look choppy compared to how smoothly the text would change if you were constantly rendering the mouse position text.
Here is an example of constantly capturing and displaying the mouse position, as you might actually want to do.
I'm drawing a textfield onto a bitmap which I use as texture for a 3D object.
I'm listening for Event.change, and so whenever the user adds a character I redraw the texture. But to really give the 3D object a 'interactive textfield feeling', I want to draw text selections and draw the caret (the blinking text cursor), but by default these a not drawn when using bitmapData.draw(textField), nor can I find a Event to listen for 'textSelected'.
Any ideas?
//is there any event that catches text selection / blinking of text-cursor?
textField.addEventListener(Event.CHANGE, redrawTexture);
//...
//is there any way to draw text selection / text-cursor in the bitmap?
bmpData.draw(textField);
textField.addEventListener(FocusEvent.FOCUS_IN, redrawTexture, false, 0, true);
textField.addEventListener(FocusEvent.FOCUS_OUT, redrawTexture, false, 0, true);
var bmp:BitmapData = new BitmapData(width, height);
bmp.draw(textField);
var snapshot:Bitmap = new Bitmap(bmp);