Come rendere la clip Canvas il suo contenuto in Flex?

Question

Disegno una linea su un oggetto Canvas con i metodi di spostamento moveTo e lineTo. Se un'estremità della linea si trova all'esterno della tela, la linea si rovescia e viene disegnata sopra o sotto altri elementi nell'applicazione.

Come faccio a rendere la tela contenuta all'interno della tela?

Grazie!

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

Ho avuto un problema simile qualche tempo fa. È necessario incorporare un altro contenitore all'interno dell'area di disegno e disegnare invece la grafica primitiva. Credo che questo sia dovuto al fatto che il componente Canvas si limita a ritagliare i componenti figlio e non i grafici primitivi.

Esempio: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1421196. Include alcuni esempi di codice a circa metà della pagina.

Answer 3

Sembra che questo potrebbe essere utile:

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

Answer 4

Set ClipToBounds proprietà del Canvas per vera:

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

Answer 5

Il link nella risposta consigliata è rotto. Ho risolto il problema posizionando un'altra tela all'interno della tela che è più grande della tela esterna.

Esempio:

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

Se la Canvas finestra sta per essere ridimensionata in fase di esecuzione, aggiungere un listener di eventi di ridimensionamento per ridimensionare la Tela anche.

Answer 6

Ho appena sviluppato un componente Flex Box, che funge da contenitore di componenti regolari, ma disegna uno sfondo rettangolo arrotondato, con un altro rettangolo arrotondato che indica un livello di riempimento. Per questo ho dovuto ritagliare la sezione superiore che non dovrebbe essere riempita. Disegnare il rettangolo di riempimento all'altezza di riempimento non era un'opzione in quanto gli angoli arrotondati non corrispondevano.

Quello che ho imparato:

• ho creato un componente della tela di canapa solo per disegnare il livello di riempimento con limiti 0/0 e larghezza/altezza del Box
• ho aggiunto quella tela nella casella qui dell'indice 0 via addChildAt()
• a impostare la proprietà includeInLayout false per quella tela dato che non prenda parte alla interfaccia grafica della scatola stessa, ma piuttosto come alcuni riquadro disegno galleggiante sulla cima
• ho poi aggiunto un altro tela come la maschera a quella tela di riempimento (addChild() e imposta m chiedere proprietà)

Ecco il codice:

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