Как заставить Холст отсечь свое содержание в Flex?

У меня была подобная проблема некоторое время назад. Необходимо встроить другой контейнер в холсте и потянуть примитивную графику в этом вместо этого. Я полагаю, что это вызвано тем, что компонент Холста только отсекает дочерние компоненты и не примитивную графику.

Пример здесь: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1421196. Это включает некоторый пример кода приблизительно половина пути ниже на страницу.

Похоже, это может быть полезно :

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

Установите для свойства ClipToBounds Canvas значение true:

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

Ссылка в рекомендуемом ответе: сломанный. Я решил проблему, поместив в свой холст еще один холст, который больше внешнего холста.

Пример:

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

Если размер холста окна будет изменен во время выполнения, добавьте приемник событий изменения размера, чтобы также изменить размер холста холста.

Я только что разработал компонент Flex Box, который действует как обычный контейнер для компонентов, но рисует фон прямоугольника с закругленными углами, а другой прямоугольник с закругленными углами указывает уровень заливки. Для этого мне нужно было обрезать верхнюю часть, которая не должна заполняться. Нарисовать прямоугольник заливки по высоте заливки было невозможно, поскольку скругленные углы не совпадали.

Что я узнал:

• Я создал компонент Canvas только для рисования уровня заливки с границами 0/0 и шириной / высотой Box
• Я добавил этот холст в Box с индексом 0 через addChildAt ( )
• Я установил для свойства includeInLayout значение false для этого холста, так как оно не должно участвовать в компоновке самого бокса, а скорее действовать как некая плавающая панель рисования наверху
• Затем я добавил еще один холст в качестве маски для этого fill-canvas (addChild () и свойство set mask)

Вот код:

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