WebContent/src/test/test-arrow.lzx

<?xml version="1.0" encoding="UTF-8"?>
<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
    	  
  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied.  See the License for the
  specific language governing permissions and limitations
  under the License.
  
-->

<canvas debug="true" width="500" height="100%" >
	
	<debug oninit="Debug.showInternalProperties = true"/>
	
<class name="drawViewNew" extends="drawview" cachebitmap="false" x="-1" y="-1" >
    
</class>

<drawview>
    
    <handler name="onconstruct">
        <![CDATA[
            //var pStart = {'x':100,'y':100};
            //var pEnd = {'x':200,'y':200};
            
            var p = new flash.geom.Point(100,100);
            var pEnd = new flash.geom.Point(100,200);
            if ($debug) Debug.write("p",p);
            
            var normalizedPoint = new flash.geom.Point(-2, 4);
			if ($debug) Debug.write(normalizedPoint.length); // 5
			if ($debug) Debug.write(normalizedPoint.toString()); // (x=3, y=4)
			normalizedPoint.normalize(10);
			if ($debug) Debug.write(normalizedPoint.length); // 10
			if ($debug) Debug.write(normalizedPoint.toString()); // (x=6, y=8)
            
            
            var normalizedPoint = new flash.geom.Point(2, -4);
            if ($debug) Debug.write(normalizedPoint.length); // 5
            if ($debug) Debug.write(normalizedPoint.toString()); // (x=3, y=4)
            normalizedPoint.normalize(10);
            if ($debug) Debug.write(normalizedPoint.length); // 10
            if ($debug) Debug.write(normalizedPoint.toString()); // (x=6, y=8)
            
            //normalizedPoint.normalize(5);
            //if ($debug) Debug.write(normalizedPoint.length); // 10
            //if ($debug) Debug.write(normalizedPoint.toString()); // (x=3, y=4)

            if ($debug) Debug.write("##################");
            
            var pArrowStart = new flash.geom.Point(100,100);
	        var pArrowEnd = new flash.geom.Point(200,100);
	        
	        var obj = new lz.drawViewNew(canvas);
	        
	        this.drawArrow(obj,pArrowStart,pArrowEnd,4);
        ]]>
    </handler>
    
    <method name="test">
        var p1 = p.normalize(1);
        if ($debug) Debug.write("p1",p1);
        
        var p11 = flash.geom.Point.interpolate(p,pEnd,0.5);
        if ($debug) Debug.write("p11",p11);
        
        
        var p12 = pEnd.subtract(p);
        if ($debug) Debug.write("p12",p12);
        
        
        var pArrowStart = new flash.geom.Point(100,100);
        var pArrowEnd = new flash.geom.Point(200,200);
        
        var obj = new lz.drawViewNew(canvas);
        
        this.drawArrow(obj,pArrowStart,pArrowEnd,4);
        
        pArrowStart = new flash.geom.Point(300,300);
        pArrowEnd = new flash.geom.Point(200,200);
        obj = new lz.drawViewNew(canvas);
        this.drawArrow(obj,pArrowStart,pArrowEnd,20);
        
        pArrowStart = new flash.geom.Point(600,300);
        pArrowEnd = new flash.geom.Point(200,100);
        obj = new lz.drawViewNew(canvas);
        this.drawArrow(obj,pArrowStart,pArrowEnd,20);
        
        var p1 = new flash.geom.Point(-60, -100);
        var p2 = new flash.geom.Point(20, 50);
        var f = 0.5;
        
        var p3 = flash.geom.Point.interpolate(p1,p2,f);
        if ($debug) Debug.write("p3",p3);
    </method>
    
    <method name="drawArrow" args="graphics,start,end,thickness">
        <![CDATA[
    //(graphics:Graphics,
    //            start:Point,end:Point,
    //            style:Object=null):void {
            
            if (start.equals(end)) return;
            
            
            var arrowStyle = {'shaftControlPosition':0.5,
                    'shaftControlSize':0.5,
                    'headLength':thickness*5, //Pixel Length of arrow head
                    'headWidth':thickness*5,//Relative width of arrow head
                    'edgeControlPosition':0.5,
                    'edgeControlSize':0.5,
                    'shaftPosition':0,
                    'shaftThickness':thickness
                    };
            
            var fullVect:Point = end.subtract(start);
            var halfWidth:Number = (arrowStyle.headWidth != -1) ? arrowStyle.headWidth/2 : arrowStyle.headLength/2; 
            
            //Figure out the line start/end points
            var startNorm = new flash.geom.Point(fullVect.y,-fullVect.x);
            startNorm.normalize(arrowStyle.shaftThickness/2);
            var start1 = start.add(startNorm);
            var start2 = start.subtract(startNorm);
            var end1 = end.add(startNorm);
            var end2 = end.subtract(startNorm);
            
            //if ($debug) Debug.write("startNorm: ",startNorm.toString());
            //if ($debug) Debug.write("start1: ",start1.toString());
            //if ($debug) Debug.write("start2: ",start2.toString());
            //if ($debug) Debug.write("end1: ",end1.toString());
            //if ($debug) Debug.write("end2: ",end2.toString());
            
            //figure out where the arrow head starts
            var headPnt = fullVect.clone();
            //if ($debug) Debug.write("headPnt 1: ",headPnt.toString());
            //if ($debug) Debug.write("headPnt.length 1: ",headPnt.length);
            //if ($debug) Debug.write("arrowStyle.headLength 1: ",arrowStyle.headLength);
            headPnt.normalize(headPnt.length-arrowStyle.headLength);
            //if ($debug) Debug.write("headPnt 2: ",headPnt.toString());
            headPnt = headPnt.add(start);
            //if ($debug) Debug.write("headPnt 3: ",headPnt.toString());
            
            //calculate the arrowhead corners
            var headPntNorm = startNorm.clone();
            //if ($debug) Debug.write("headPntNorm ^^: ",headPntNorm.toString());
            //if ($debug) Debug.write("halfWidth ^^: ",halfWidth);
            headPntNorm.normalize(halfWidth);
            //if ($debug) Debug.write("headPntNorm: ",headPntNorm.toString());
            var edge1 = headPnt.add(headPntNorm);
            var edge2 = headPnt.subtract(headPntNorm);
            
            //if ($debug) Debug.write("edge1: ",edge1.toString());
            //if ($debug) Debug.write("edge2: ",edge2.toString());
            
            //Figure out where the arrow connects the the shaft, then calc the intersections
            var shaftCenter = flash.geom.Point.interpolate(end,headPnt,arrowStyle.shaftPosition);
            //if ($debug) Debug.write("end: ",end.toString());
            //if ($debug) Debug.write("headPnt",headPnt.toString());
            //if ($debug) Debug.write("arrowStyle.shaftPosition: ",arrowStyle.shaftPosition);
            //if ($debug) Debug.write("shaftCenter",shaftCenter.toString());
            var inter1 = this.getLineIntersection(start1,end1,shaftCenter,edge1);
            var inter2 = this.getLineIntersection(start2,end2,shaftCenter,edge2);
            
            //if ($debug) Debug.write("inter1: ",inter1.toString());
            //if ($debug) Debug.write("inter2: ",inter2.toString());
            
            //Figure out the control points
            var edgeCenter = flash.geom.Point.interpolate(end,headPnt,arrowStyle.edgeControlPosition);
            var edgeNorm = startNorm.clone();
            edgeNorm.normalize(halfWidth*arrowStyle.edgeControlSize);
            //if ($debug) Debug.write("halfWidth*arrowStyle.edgeControlSize: "+(halfWidth*arrowStyle.edgeControlSize));
            //if ($debug) Debug.write("edgeNorm: "+edgeNorm.toString());
            var edgeCntrl1 = edgeCenter.add(edgeNorm);
            var edgeCntrl2 = edgeCenter.subtract(edgeNorm);

            //if ($debug) Debug.write("edgeCntrl1: ",edgeCntrl1.toString());
            //if ($debug) Debug.write("edgeCntrl2: ",edgeCntrl2.toString());

            //if ($debug) Debug.write("moveTo: ",start1.x,start1.y);
            //if ($debug) Debug.write("lineTo",inter1.x,inter1.y);
            //if ($debug) Debug.write("lineTo",edge1.x,edge1.y);
            //if ($debug) Debug.write("quadraticCurveTo",edgeCntrl1.x,edgeCntrl1.y,end.x,end.y);
            //if ($debug) Debug.write("quadraticCurveTo",edgeCntrl2.x,edgeCntrl2.y,edge2.x,edge2.y);
            //if ($debug) Debug.write("lineTo",inter2.x,inter2.y);
            //if ($debug) Debug.write("lineTo",start2.x,start2.y);
            //if ($debug) Debug.write("lineTo",start1.x,start1.y);
            
            graphics.moveTo(start1.x,start1.y);
            graphics.lineTo(inter1.x,inter1.y);
            graphics.lineTo(edge1.x,edge1.y);
            graphics.quadraticCurveTo(edgeCntrl1.x,edgeCntrl1.y,end.x,end.y);
            graphics.quadraticCurveTo(edgeCntrl2.x,edgeCntrl2.y,edge2.x,edge2.y);
            graphics.lineTo(inter2.x,inter2.y);
            graphics.lineTo(start2.x,start2.y);
            graphics.lineTo(start1.x,start1.y);
            
            graphics.strokeStyle = 0x000000;
            graphics.stroke();

            graphics.fillStyle = 0x000000;
            graphics.fill();
        ]]>
    </method>
    
    <method name="getLineIntersection" args="a1,a2,b1,b2">
        <![CDATA[ 
        
            //calculate directional constants
            var k1 = (a2.y-a1.y) / (a2.x-a1.x);
            var k2 = (b2.y-b1.y) / (b2.x-b1.x);
            
            // if the directional constants are equal, the lines are parallel,
            // meaning there is no intersection point.
            if( k1 == k2 ) return null;
            
            var x = 0;
            var y = 0;
            var m1 = 0;
            var m2 = 0;
            
            //if ($debug) Debug.write("k1",k1);
            //if ($debug) Debug.write("k2",k2);
            
            // an infinite directional constant means the line is vertical
            if( !isFinite(k1) ) {
                
                //if ($debug) Debug.write("k1 ^^ 0");
                //if ($debug) Debug.write("k2",k2,(b2.y-b1.y));
                //if ($debug) Debug.write("b1.getY(): "+b1.y);
                //if ($debug) Debug.write("b2.getY(): "+b2.y);
                // so the intersection must be at the x coordinate of the line
                x = a1.x;
                m2 = b1.y - k2 * b1.x;
                //if ($debug) Debug.write("m2",m2);
                y = k2 * x + m2;
                //if ($debug) Debug.write("y",y);
                
            // same as above for line 2
            } else if ( !isFinite(k2) ) {
                
                //if ($debug) Debug.write("k2 ^ 0");
                
                m1 = a1.y - k1 * a1.x;
                x = b1.x;
                y = k1 * x + m1;

            // if neither of the lines are vertical
            } else {
                
                //if ($debug) Debug.write("neither");
            
                m1 = a1.y - k1 * a1.x;
                m2 = b1.y - k2 * b1.x;              
                x = (m1-m2) / (k2-k1);
                y = k1 * x + m1;
                
            }
            
            return new flash.geom.Point(x,y);
        ]]>
    </method>
    
    <method name="intermediatePoint" args="p1,p2,f">
        <![CDATA[
            
            var d = Math.sqrt( Math.abs(p1.x - p2.x)^2 + Math.abs(p2.y - p2.y)^2 );
        
        ]]>
    </method>
    
</drawview>
  
    
</canvas>