para - ¿Cómo hacer que el Lienzo recorta sus contenidos en Flex?

flex wrap para que sirve

Question

Trazaré 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 Canvas mantenga la línea dentro de sí misma?

¡Gracias!

Answer 1

Parece que esto podría ser útil:

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

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

<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 4

Establezca la propiedad ClipToBounds del lienzo en true:

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

Answer 5

El enlace en 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 de la ventana va a cambiar de tamaño en el tiempo de ejecución, agregue un detector de eventos de cambio de tamaño para redimensionar el lienzo del lienzo también.

Answer 6

Acabo de desarrollar un componente de Flex Box, que actúa como un contenedor de componentes normal, 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.

Que aprendí:

• Creé un componente Canvas solo para dibujar el nivel de relleno con los límites 0/0 y el ancho / alto de la caja
• Agregué ese lienzo a la caja en el índice 0 a través de addChildAt ()
• Establecí la propiedad includeInLayout en falso para ese lienzo, ya que no debería participar en el diseño del propio cuadro, sino que actúa como un panel de dibujo flotante en la parte superior.
• Luego agregué otro lienzo como máscara a ese lienzo de relleno (addChild () y establecí la propiedad de máscara)

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();
    }
}