如何在flex中的两个组件之间绘制一条线

时间:2013-05-19 11:11:24

标签: actionscript-3 flex flex4

我有两个组件,其中一个是另一个的孩子,我需要用mouseDown和MouseUp在它们之间画一条线 问题是:我不知道如何找到shape1和shape2的真实x,y

(组件是我写的递归组件)

我的代码有一部分但它无法正常工作

我的组成部分:

<mx:Box id="component" borderStyle="solid" width="100%" height="500">
    <local:compforSM id="compForSS" label="پرسپکتیو" rotateLabel="true" statusColor="{0x008000}" layoutType="{compforSM.HORIZENTAL}" width="80%" height="80%" creationComplete="createComplete()" />

我的MouseDownHandler:

private function mouseDown(e:MouseDownOrUpEvent):void {
if (e.target != null) {
if(firstObject == null){
firstObject = e.target;
        firstPoint = component.localToGlobal(new Point(component.x, component.y));
        firstPoint.x = mouseX - firstPoint.x;
        firstPoint.y = mouseY - firstPoint.y;
        }

        }

}

1 个答案:

答案 0 :(得分:0)

我有一段时间没有这样做,但我认为你首先要通过使用组件左上角坐标来转换为全局点。

然后,如果不在舞台上但在另一个组件上绘图,则需要将全局点转换回相对于该组件的本地点。

这样的事情:

var globalPoint:Point = component.localToGlobal(new Point(0, 0));

var newLocalPoint:Point = componentWhereYouWantToDrawIfNotStage.globalToLocal( globalPoint );

编辑:

我不知道你想要完成的是什么。我假设您想要在鼠标指针的某处绘制 - 但不确定。此外,我不知道递归组件的含义。

以下是从外部组件的内部中心到中心绘制线的一些代码。我在所有组件的顶部使用画布以确保线条可见,无论组件是什么。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="onCreationComplete();">

    <fx:Script>
        <![CDATA[

        private function onCreationComplete():void
        {
            var globalInnerPoint:Point = innerComponent.localToGlobal( new Point( innerComponent.width / 2, innerComponent.height / 2 ) );
            var globalOuterPoint:Point = outerCcomponent.localToGlobal( new Point( outerCcomponent.width / 2, outerCcomponent.height / 2 ) );

            var canvasLayerInnerPoint:Point = canvasLayer.globalToLocal( globalInnerPoint );
            var canvasLayerOuterPoint:Point = canvasLayer.globalToLocal( globalOuterPoint);

            canvasLayer.graphics.lineStyle(4, 0xFF0000);
            canvasLayer.graphics.moveTo( canvasLayerInnerPoint.x, canvasLayerInnerPoint.y );
            canvasLayer.graphics.lineTo( canvasLayerOuterPoint.x, canvasLayerOuterPoint.y );
        }
        ]]>
    </fx:Script>


    <mx:Box id="outerCcomponent" borderStyle="solid" width="100%" height="500">
        <mx:Box id="innerComponent" width="80%" height="80%" borderStyle="solid"/>
    </mx:Box>

    <mx:Canvas id="canvasLayer" height="100%" width="100%" />

</s:Application>