para - ¿Cómo hacer que el Lienzo recorta sus contenidos en Flex?
flex wrap para que sirve (6)
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!
Parece que esto podría ser útil:
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.
<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>
Establezca la propiedad ClipToBounds del lienzo en true:
<Canvas ClipToBounds="True">... Content ...</Canvas>
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.
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();
}
}