플렉스 : 캔버스의 배경에 선이 보이지 않는 이유

Question

MyCanvas 자체에 선을 그 으려하지만 배경 뒤에 그려지는 것처럼 보입니다. 무슨 일이 일어나고 어떻게해야합니까?

Main.mxml

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:my="*"> 
    <my:MyCanvas width="300" height="300" id="myCanvas"></my:MyCanvas> 
    <mx:Button label="Draw" click="myCanvas.Draw();"></mx:Button> 
</mx:Application> 

MyCanvas.as

package 
{ 
    import mx.containers.Canvas; 
    public class MyCanvas extends Canvas 
    { 
     public function MyCanvas() 
     { 
      this.setStyle("backgroundColor", "white"); 
     } 
     public function Draw():void 
     { 
      graphics.lineStyle(1); 
      graphics.moveTo(-10, -10); 
      graphics.lineTo(width + 10, height + 10); 
     } 
    } 
} 

감사합니다.

Answer 1

DisplayObject의 Graphics 개체는 항상 DisplayList의 맨 아래에 배치됩니다. 이 경우에는 흰색 배경을 적용 할 때 (아마 Flex 전문가가 아닌지) 아마도 겹치는 자식이 수퍼 클래스에 의해 추가 될 가능성이 있습니다.

그러나 그리기에 특별히 헌신적 인 어린이를 추가하는 것이 더 안전 할 수 있습니다. 이렇게하면 표시 여부를 더 잘 제어 할 수 있습니다.

package 
{ 
    import mx.containers.Canvas; 
    public class MyCanvas extends Canvas 
    { 

     private var shape:Shape; 

     public function MyCanvas() 
     { 
      this.setStyle("backgroundColor", "white"); 

      addChild(shape = new Shape()); 
     } 
     public function Draw():void 
     { 

      shape.graphics.lineStyle(1); 
      shape.graphics.moveTo(-10, -10); 
      shape.graphics.lineTo(width + 10, height + 10); 
     } 
    } 
}