Question

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

如何让Canvas保持包含在其中的行？

谢谢！

Answer 1

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

此处示例：http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1421196。它包含了一些关于页面一半的示例代码。

Answer 2

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

看起来这可能有用：

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

Answer 4

推荐答案中的链接已中断。我通过在画布中放置一个大于外部画布的画布来解决问题。

示例：

<?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窗口的大小，请添加resize事件侦听器以调整画布Canvas的大小。

Answer 5

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

我学到了什么：

我创建了一个Canvas组件，用于绘制填充级别，其边界为0/0，宽度/高度为Box
我通过addChildAt（）
我为该画布设置了includeInLayout属性为false，因为它不应该参与Box本身的布局，而是作为顶部的一些浮动绘图窗格
然后我添加了另一个Canvas作为该fill-canvas的掩码（addChild（），并设置了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();
    }
}

Answer 6

将Canvas的ClipToBounds属性设置为true：

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

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

6 个答案: