Wie wird der Canvas-Clip in Flex formatiert?

Question

Ich zeichne eine Linie auf einem Canvas-Objekt mit den Grafikmethoden moveTo und lineTo. Wenn ein Ende der Linie außerhalb des Canvas-Bereichs liegt, wird die Linie ausgeblendet und über oder unter anderen Elementen in der Anwendung angezeigt.

Wie kann ich Canvas die Zeile in sich behalten?

Danke!

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

Ich hatte vor einiger Zeit ein ähnliches Problem. Sie müssen einen anderen Container in die Zeichenfläche einbetten und stattdessen die primitiven Grafiken zeichnen. Ich glaube, das liegt daran, dass die Canvas-Komponente nur untergeordnete Komponenten und nicht primitive Grafiken schneidet.

Beispiel hier: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1421196. Es enthält einen Beispielcode etwa auf halber Seite der Seite.

Answer 3

Sieht aus wie dies nützlich sein könnte:

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

Answer 4

Set ClipToBounds Eigenschaft des Canvas auf true:

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

Answer 5

Der Link in der empfohlenen Antwort gebrochen ist. Ich löste das Problem, indem ich eine weitere Leinwand in meine Leinwand legte, die größer als die äußere Leinwand war.

Beispiel:

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

Wenn das Fenster Leinwand wird zur Laufzeit geht zu der Größe verändert werden, fügen Sie ein Resize-Ereignis-Listener auch die Leinwand Leinwand zu ändern.

Answer 6

Ich habe gerade eine Flexbox-Komponente entwickelt, die als normaler Komponentencontainer fungiert, aber einen abgerundeten Rechteckhintergrund zeichnet, während ein anderes abgerundetes Rechteck einen Füllgrad angibt. Dafür musste ich den oberen Bereich abschneiden, der nicht gefüllt werden sollte. Das Füllrechteck auf die Füllhöhe zu zeichnen, war keine Option, da die abgerundeten Ecken nicht übereinstimmen würden.

Was ich gelernt habe:

• ich eine Leinwand Komponente erstellt nur für die Erstellung des Füllstandes mit Grenzen 0/0 und Breite/Höhe der Box
• fügte ich hinzu, dass Leinwand auf die Box bei Index 0 über addChildAt()
• ich die includeInLayout Eigenschaft auf false für die Leinwand gesetzt, da es nicht an den Layouten der Box selbst, sondern fungiert als eine Floating-Zeichenfläche auf
• ich habe dann eine andere Leinwand nehmen soll die Maske für diese Füllfläche (addChild()) und m fragen Eigenschaft)

Hier ist ein Code:

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