Apache flex 如何使画布在Flex中剪辑其内容？

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

如何使画布保持线条在其内部

---

谢谢

不久前我也有类似的问题。您需要在画布中嵌入另一个容器，并在其中绘制基本图形。我相信这是因为画布组件只剪辑子组件，而不是原始图形

这里的示例：。它包括一些在页面中间的示例代码。

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

看起来这可能很有用：

---

将画布的ClipToBounds属性设置为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组件，它充当常规组件容器，但绘制了一个圆角矩形背景，另一个圆角矩形表示填充级别。为此，我需要剪辑的上部部分，不应该得到填补。由于圆角不匹配，因此无法将填充矩形绘制为填充高度

我学到的是：

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

---

那个链接对我不起作用，也许你是指这个帖子：你能再解释一下吗？