¿Cómo hacer que el clip Canvas sea contenido en Flex?

Question

Dibujé una línea en un objeto Canvas con los métodos de gráficos moveTo y lineTo. Si un extremo de la línea se encuentra fuera del lienzo, la línea se derrama y se dibuja sobre o debajo de otros elementos en la aplicación.

¿Cómo hago para que el Lienzo mantenga la línea dentro de sí misma?

Gracias!

Answer 1

<mx:Canvas id="canvas" top="0" right="51" left="0" bottom="32"> 
<mx:Canvas x="-1" y="0" width="0" height="0"> <!-- This is a HACK to make the canvas clip --> 
</mx:Canvas> 
</mx:Canvas> 

Answer 2

Tuve un problema similar hace algún tiempo. Necesita insertar otro contenedor dentro del lienzo y dibujar los gráficos primitivos en ese lugar. Creo que esto se debe a que el componente Canvas solo recorta los componentes secundarios y no los gráficos primitivos.

Ejemplo aquí: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1421196. Incluye un código de muestra aproximadamente a la mitad de la página.

Answer 3

Parece que esto podría ser útil:

http://forums.adobe.com/message/199071#199071

Answer 4

Conjunto ClipToBounds propiedad del lienzo true:

<Canvas ClipToBounds="True">... Content ...</Canvas> 

Answer 5

El eslabón de la respuesta recomendada está roto. Resolví el problema colocando otro lienzo dentro de mi lienzo que es más grande que el lienzo exterior.

Ejemplo:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="onComplete()"> 
    <mx:Script><![CDATA[ 
     private function onComplete():void 
     { 
      canvas.graphics.lineStyle(1); 
      canvas.graphics.moveTo(-100, -100); 
      canvas.graphics.lineTo(400, 400); 
     } 
    ]]></mx:Script> 
    <mx:Canvas id="window" 
       height="300" 
       width="300" 
       clipContent="true" 
       horizontalScrollPolicy="off" 
       verticalScrollPolicy="off" 
       backgroundColor="white"> 
     <mx:Canvas id="canvas" width="301" height="301"> 
     </mx:Canvas> 
    </mx:Canvas> 
</mx:Application> 

Si el lienzo ventana se va a cambiar de tamaño en tiempo de ejecución, añadir un detector de eventos de cambio de tamaño para cambiar el tamaño del lienzo de lona también.

Answer 6

Acabo de desarrollar un componente de Flex Box, que actúa como un contenedor de componentes regulares, pero dibuja un fondo rectangular redondeado, con otro rectángulo redondeado que indica un nivel de relleno. Para eso, necesitaba recortar la sección superior que no debería llenarse. Dibujar el rectángulo de relleno en la altura de relleno no era una opción, ya que las esquinas redondeadas no coincidían.

Lo que aprendí:

• he creado un componente simplemente lienzo para dibujar el nivel de llenado con límites 0/0 y anchura/altura de la caja
• añadí que la lona de la caja en el índice 0 a través de addChildAt()
• que establece la propiedad includeInLayout en false para que el lienzo, ya que no debe participar en el layout de la propia caja, sino más bien actuar como una panel de dibujo flotando en la superficie
• luego añade otro lienzo como la máscara de ese lienzo de relleno (addChild() y set m pedir a la propiedad)

Aquí hay un código:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
{ 
    // super 
    super.updateDisplayList(unscaledWidth, unscaledHeight); 

    // prep 
    var g:Graphics = this.graphics; 
    var fgColor:int = this.getStyle("fillColor"); 
    var bgColor:int = this.getStyle("backgroundFillColor"); 
    var radius:int = this.getStyle("cornerRadius"); 

    // clear 
    g.clear(); 

    // draw background 
    g.beginFill(bgColor, 1); 
    g.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, radius, radius); 
    g.endFill(); 

    // draw fill level 
    if (this._fillLevel > 0) { 
     var fillHeight:int = int(unscaledHeight * this._fillLevel); 

     // extra component for drawing fill-level, so we can apply mask just to this 
     if (this._fillLevelCanvas == null) { 
      this._fillLevelCanvas = new Canvas(); 
      this._fillLevelCanvas.x = 0; 
      this._fillLevelCanvas.y = 0; 
      this._fillLevelCanvas.includeInLayout = false; 
      this.addChildAt(this._fillLevelCanvas, 0); 
     } 
     this._fillLevelCanvas.width = unscaledWidth; 
     this._fillLevelCanvas.height = unscaledHeight; 

     // mask 
     if (this._fillLevelMask == null) { 
      this._fillLevelMask = new Canvas(); 
      this._fillLevelMask.x = 0; 
      this._fillLevelMask.y = 0; 
      this._fillLevelCanvas.addChild(this._fillLevelMask); 
      this._fillLevelCanvas.mask = this._fillLevelMask; 
     } 
     this._fillLevelMask.width = this.width; 
     this._fillLevelMask.height = this.height; 
     this._fillLevelMask.graphics.beginFill(0xFFFFFF); 
     this._fillLevelMask.graphics.drawRect(0, this.height-fillHeight, this._fillLevelMask.width, this._fillLevelMask.height); 
     this._fillLevelMask.graphics.endFill();     

     this._fillLevelCanvas.graphics.beginFill(fgColor, 1); 
     this._fillLevelCanvas.graphics.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, radius, radius); 
     this._fillLevelCanvas.graphics.endFill(); 
    } 
}