如何让画布上剪辑，其内容在Flex?

StackOverflow https://stackoverflow.com/questions/523571

  •  22-08-2019
  •  | 
  •  

题

我画一条线上的一个画布对象的moveTo和lineTo图形的方法。如果一个底线的谎言以外的画布，在线溢出是绘制了超过或在其他元素中的应用。

我怎么让画布上保持直线内所包含的自己吗？

谢谢！

有帮助吗？

解决方案 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>

其他提示

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

实施例这里： HTTP：// www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid=1421196 。它包括大约一半沿页面向下一些示例代码。

在推荐的应答的链接断开。我通过将我的画布内的另一个画布比所述外帆布较大解决了这个问题。

示例：

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

如果窗口被帆布要在运行时被调整大小，加resize事件侦听器还调整画布画布。

我刚刚开发了一个Flex框成分，其作为一个正常组成的容器，但画了一个圆形的矩形的背景，与另一个圆形的矩形表示，填平。为此，我需要剪辑上的部分，不应该得到填补。绘制填补的矩形，以填充高度没有选择，因为圆角不会相匹配。

我学到了什么:

  • 我创建了一个画布分只是为了绘图填充有限0/0和宽度的框
  • 我加入这一帆布的框index0通过addChildAt()
  • 我设置includeInLayout属性以假画布上，因为它不应该把一部分在正在布局的箱子本身，而是作为一些漂浮的绘图窗上
  • 然后我加入另一个帆布面罩，填补帆布(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();
    }
}

看起来这可能是有用的：

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

画布的集ClipToBounds属性设置为true：

<Canvas ClipToBounds="True">... Content ...</Canvas>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top