RE: [flexcoders] Question about drawing on the canvas

Tue, 04 Oct 2005 05:18:58 -0700


What I've found in my Flex development is that, as long as your arrow is indeed a child of the canvas, it will move when you use the canvas scroll bars.  After a quick glance at your code, I didn't see any problems, but I'm not sure of the parameter you've got in "pointerReleased(event.target)."  It seems like you are making the arrow a child of whatever object that "target" represents, and I'm not convinced that target is actually your canvas.

From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Prasad Dhananjaya
Sent: Tuesday, October 04, 2005 6:48 AM
To: FlexML
Subject: [flexcoders] Question about drawing on the canvas

Hi,

Have a simple question about drawing on the canvas.

Below code draws an arrow between mousedown point and mouseup point.
It works well. But...

When I move  canvas's scrollbar, arrow didn't move. Means it is NOT
on the canvas.Want to draw it ON the canvas. Tried several ways.
But failed. (I drawing square on the canvas using fillRect() is OK)

Can someone please tell me what's wrong.

thanks,

------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >
<mx:Script>
<![CDATA[
      var isPointerStarted = false;
      var bx:Number;
      var by:Number;

      function pointerStart(target) {
            if (isPointerStarted) return;
                  isPointerStarted = true;
                  bx = target.mouseX;
                  by = target.mouseY;
            }

      function pointerReleased(target) {
            if (!isPointerStarted) return;
                  target.lineStyle(2, 0x666666, 100);
            ★      target.createChild(arrow(target));
                  isPointerStarted = false;
                  //drawing squre on the canves
                  var ref_mc = target.createChild(mx.containers.Canvas,undefined,{width:1000});
                  ref_mc.fillRect(900, 100, 910, 110, 0x000000, 30);
            }

      function arrow(target) {
            var w = target.mouseX - bx;
            var h = target.mouseY - by;
            var l = Math.sqrt(w * w + h * h);
            var size=8;
            var sharpness=0.5;
            var s = Math.sin(sharpness);
            var c = Math.cos(sharpness);
            if(l>0){
                  w *= size / l;
                  h *= size / l;
                  target.moveTo(bx,by);
                  target.lineTo(target.mouseX, target.mouseY);
                  target.lineTo(target.mouseX - w * c - s * h, target.mouseY + w * s - h * c);
                  target.moveTo(target.mouseX, target.mouseY);
                  target.lineTo(target.mouseX - w * c + s * h, target.mouseY - w * s - h * c);
            }
      }
]]>
</mx:Script>

<mx:Canvas id="myCanves"
      x="0" y="110"  width="100%" height="225"
      borderStyle="solid"
      mouseUpSomewhere="pointerReleased(event.target)"
      mouseDown="pointerStart(event.target)"
    backgroundColor="#DEE0FE"
    backgroundAlpha="0">
</mx:Canvas>
</mx:Application>

---------------------------------------------------------------------

--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com


YAHOO! GROUPS LINKS



Reply via email to