如何让Canvas在Flex中剪辑其内容？

Question

我使用 moveTo 和 lineTo 图形方法在 Canvas 对象上绘制一条线。 如果线的一端位于画布之外，则线会溢出并绘制在应用程序中其他元素的上方或下方。

如何使画布将线条包含在其自身内？

谢谢！

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

前段时间我也遇到过类似的问题。 您需要在画布中嵌入另一个容器，并在其中绘制原始图形。 我相信这是因为 Canvas 组件仅剪辑子组件，而不是原始图形。

示例如下： http:// /www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1421196。 它包含一些位于页面中间位置的示例代码。

Answer 3

推荐答案中的链接已损坏。 我通过在画布内放置另一个比外部画布大的画布解决了这个问题。

示例：

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

如果要在运行时调整窗口 Canvas 的大小，请添加一个调整大小事件侦听器来调整画布 Canvas 的大小。

Answer 4

我刚刚开发了一个 Flex Box 组件，它充当常规组件容器，但绘制一个圆角矩形背景，另一个圆角矩形表示填充级别。 为此，我需要剪掉不应该被填充的上部部分。 将填充矩形绘制到填充高度是不可能的，因为圆角不匹配。

我学到了什么：

• 我创建了一个 Canvas 组件，只是为了绘制边界为 0/0 和 Box 的宽度/高度的填充级别
• 我通过 addChildAt() 将画布添加到索引 0 处的 Box
• 我将 includeInLayout 属性设置为 false该画布，因为它不应该参与框本身的布局，而是充当顶部的一些浮动绘图窗格，
• 然后我添加另一个画布作为该填充画布的遮罩（addChild（），并设置遮罩属性）

这里是一些代码：

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

Answer 5

看起来这可能有用：

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

Answer 6

将 Canvas 的 ClipToBounds 属性设置为 true：

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