Question

刚刚在Flex中启动了一个简单的绘图工具，以熟悉Flex中的图形编码。一开始就遇到了问题。

这里我使用Border Container作为绘图区域（Flex 4）而不是Canvas，我在Mousemove事件上绘制简单的点。是的，基本的东西很简单。但我没有看到边框容器区域中的绘制点。但我看到鼠标事件被解雇了。不知道遗失了什么。

以下是我的代码，

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[
        import mx.containers.Canvas;
        import mx.skins.Border;

        import spark.components.BorderContainer;

        protected function init():void
        {
            var whiteboard:BorderContainer = new BorderContainer();
            whiteboard.width = 1000;
            whiteboard.height = 600;                
            whiteboard.addEventListener
                  (MouseEvent.MOUSE_MOVE,whiteboard_mouseMoveHandler);
            this.addElement(whiteboard);

        }

        protected function  whiteboard_mouseMoveHandler(event:MouseEvent):void
        {               

            var graph:Graphics =
                          (event.currentTarget as BorderContainer).graphics;                    
            graph.beginFill(0x000000);
            graph.drawCircle(event.localX,event.localY,3);
            trace("x:"+event.localX+":y:"+event.localY);                
        }

    ]]>
</fx:Script>

Answer 1

BorderContainer很可能不希望你在它的图形对象上绘图。我最近没有查看BorderContainer的代码，但我记得其他人有类似的问题。

由于BorderContainer在其内容周围绘制边框，因此最有可能使用它的graphics对象来绘制边框。因此，您不应尝试使用边框容器的graphics属性进行绘制。

相反，将UIComponent或其他一些Flex对象添加到边框容器中，然后在该对象上绘制图形。

Answer 2

使用皮肤并在皮肤上画画。这就是整个行为/皮肤分离的目的。

在Flex中使用Border容器无法显示简单绘图

2 个答案: