HTML5 canvas drawing line over ruler - html

Please visit the following jsfiddle:- http://jsfiddle.net/mayanknimje87/GfaZ2/3/
there is a ruler and pencil. I can draw line over ruler when it is straight. But when i rotate the scale, drawing of line won't work. Also, i want to give animation, when user put pencil over the ruler (restrict to upper portion of ruler only not to bottom or middle),It start drawing line and animate. Ex. If user put pencil on ruler mark 15 then it should animate and draw line from 15 to 0 . Also user can draw line when pencil touches the top of ruler not in middle and bottom. Please help me out. It will be great to learn. Thanks in advance.

In order for the canvas pixels to be drawn above those image elements, you will have to put the canvas on top. However, the canvas will then soak up the mouse events.
Still, I think you should do that, and then catch the mouse events in the canvas and handle the dragging there.

Related

Drawing to NSView within NSMenuItem is darkened

I am drawing a coloured circle within an NSView that is contained in an NSMenuItem. When I do so, the circle is drawn in a darker colour to the one I specify and when I add a subview with no drawing code, the area occupied by that view is drawn in the true colour, as illustrated by the image. Could someone explain to me why this is happening and how to fix it?
Many Thanks, Ben.

Rotating particles around a mouse with an offset in canvas

Basically, I want to rotate some particles with an offset from the mouse cursor and therefore form them in a ring shape around it:
All suggestions on how to achieve this is more then welcome!

Coloring shapes in winRT?

My objective is to color a rectangle shape in winRT.When the brush leaves rectangle border the coloring should stop.So after coloring I need a fill colored rectangle.
Any help will be really appreciated.
Thanks in advance.
You can use the Clip property to clip any element to a rectangle shape. Note though that right now it only support rectangle clips and for more you would need to use Direct2D or process all the pixels yourself.

Setting movieclip origin with AS3

I have a spotlight that moves on a stage.
Now I rotate the spotlight but its not rotating on the correct point/origin.
I am trying to do something like
myOject.setOrigin = {x , y};
//and then rotate it about x,y.
I have manually set the white circle in the correct place and when I rotate the
object with the mouse on the screen it works.
Can somebody help me?
Make sure the registration point is in the middle of your symbol. It's not the white circle that appears when you use the Free Transform Tool:
But the crosshair that appears when you edit your movie clip:
You can easily center the object by selecting everything, then opening the Align panel and aligning its horizontal and vertical axes to the center using the two "center" icons under the Align section. If your MC has multiple items per layer, group each layer before aligning, then ungroup after aligning:
The white circle is not what will be used as the origin, it's the little cross. Adjust your clip to have that in the center (you'll have to move all of it's contents). Another option, if moving is not possible, is to wrap your clip in another clip and move it within that.
Select symbol and click CTRL+E - Then move it to positioning cross.

AS3 move image as the mouse moves

This probably will be very easy for some, but I am stuck on this. I have a map in a movieclip(mc_map) on stage and a small square which acts as a mask to the really bigger size of the same map. What I am want to do is that when I move the mouse on the mc_map(eg: say my cursor is on New York), the small sqaure window will unhide the same area, or will move that bigger image such that the same area is shown under the square mask. I also want to add another cursor(or crosshair) to the stage which is live only in the area of the square and replicates the position of mouse on map. Any help on this will be great thanks.
There are a lot of tutorials on this type of "magnify" effect. See if this one helps: http://www.flashuser.net/flash-actionscript-as3/create-a-magnifying-glass-in-actionscript-3-0.html