闪光/动作：绘制显示对象＆QUOT;到＆QUOT;另一个 [英] Flash/ActionScript: Draw a display object "onto" another

问题描述

我的想法（如建议如这里）是使用 beginBitmapFill （）和的drawRect （）来绘制一个位图复印件（使用由的BitmapData.draw 一个影片剪辑的（））上。图形其他影片剪辑的属性，但事实证明这比我想象的更困难，主要表现为这些原因：

My idea (as suggested e.g. here) was to use beginBitmapFill() and drawRect() to draw a bitmap copy (made using BitmapData.draw()) of one MovieClip onto the .graphics property of the other MovieClip, but this proved more difficult than I thought, mainly for these reasons:

1. <打击> 透明度不preserved ：在源影片剪辑是透明的，目标图形变成白色。我使用的是 BlendMode 试过了，但它并不能帮助。看来白色像素实际复制到BitmapData。我必须失去了一些东西，但我不知道是什么看来问题是，对于的BitmapData 构造的文件是错误的：透明度不违约到的真正的，但要的假的。所以，如果你创建一个新的BitmapData（X，Y，真）透明度是preserved，否则不是。

1. Transparency is not preserved: where the source MovieClip is transparent, the target Graphics becomes white. I've tried using a BlendMode, but it doesn't help. It seems white pixels are actually copied into the BitmapData. I must be missing something, but I don't know what. It seems the problem was that the documentation for the BitmapData constructor is wrong: transparency does not default to true, but to false. So if you create a new BitmapData(x, y, true) transparency is preserved, otherwise not.

定位。如果源影片剪辑是在（0中心（与中心，0），你必须申请一个矩阵其复制时的BitmapData，或位图将只包含源的右下方移动，影片剪辑。搞清楚如何多来移动它是棘手的，而且我相信它涉及到获得界限不知。（如果源对象的画布内完全集中，你可以简单地按课程的一半的宽度和高度，抵消了。）

Positioning. If the source MovieClip is centered (with the center at (0, 0), you have to apply a Matrix to move it when copying it to a BitmapData, or the bitmap will only contain the bottom right of the source MovieClip. Figuring out how much to move it is tricky, and I assume it involved getting the boundaries somehow. (If the source object is perfectly centered within its canvas, you can simply offset it by half its width and height, of course.)

beginBitmapFill 瓷砖。看来，如果你不启动的drawRect （）在（0，0），位图填充不会从（0，0）开始的位图内的任一。这意味着你不得不再次转移源位图的基础上，在您要开始绘制。

beginBitmapFill tiling. It seems if you don't start the drawRect() at (0, 0), the bitmap fill doesn't start from (0, 0) within the bitmap either. This means you have to shift the source bitmap once again, based on where you want to start drawing.

（然后是其他的东西，就像不必线型（0,0,0），所以的drawRect（）不绘制边框等。）

(Then there's other stuff like having to lineStyle(0,0,0) so the drawRect() doesn't draw a border etc.)

所有这些棘手的麻烦使我相信我会对此错误的方式。是否有更简单的方法来做到这一点？有一个库的地方，可以帮助我吗？有没有人成功地做到了这一点？也许是我的画布不应该是一个雪碧而是一个位图？但我不知道如何使用提请它了lineTo （）等。

All this tricky trouble leads me to believe I'm going about this the wrong way. Is there an easier way to do this? Is there a library somewhere that can help me? Has anyone successfully done this? Perhaps my drawing canvas shouldn't be a Sprite but a Bitmap? But then I don't know how to draw to it using lineTo() etc.

这里的情况：我有一个雪碧我用画的.graphics，使用了lineTo（）等，这些现在我要绘制时使用的MovieClip作为一个刷（或者只是放置一个在绘图表面上的另一影片剪辑）的副本，使第一个图形的其他影片剪辑的一部分。我不能的addChild （），因为这样的矢量图形不会与绘制的图形交互。

Here's the situation: I have a Sprite to which I draw using its .graphics, using lineTo() etc. Now I want to use a MovieClip as a brush when drawing (or just place a copy of another MovieClip on the drawing surface), making the other MovieClip part of the graphics of the first one. I can't addChild() because then the vector graphics wouldn't interact with the drawn graphics.

修改：<一href="http://stackoverflow.com/questions/554631/flash-actionscript-draw-a-display-object-onto-another/554890#554890">Theo提供了一个可行的解决方案是完美的作品的除了的一个事实，即它不适用旋转和缩放应用为DisplayObject被绘制到图形表面。这是<一个href="http://stackoverflow.com/questions/554631/flash-actionscript-draw-a-display-object-onto-another/554890#554890">Theo's解决方案：

EDIT: Theo has provided a working solution that works perfectly except for the fact that it does not apply the rotation and scaling applied to the DisplayObject being drawn onto the Graphics surface. This is Theo's solution:

private function drawOntoGraphics(source : IBitmapDrawable, target : Graphics, position : Point = null) : void
{
    position = position == null ? new Point() : position;
    var bounds : Rectangle = DisplayObject(source).getBounds(DisplayObject(source));
    var bitmapData : BitmapData = new BitmapData(bounds.width, bounds.height, true, 0x00000000);
    bitmapData.draw(source, new Matrix(1, 0, 0, 1, -bounds.x, -bounds.y), null, null, null, true);
    target.beginBitmapFill(bitmapData, new Matrix(1, 0, 0, 1, bounds.x + position.x, bounds.y + position.y));
    target.drawRect(bounds.x + position.x, bounds.y + position.y, bounds.width, bounds.height);
}

要支持旋转和缩放，我认为以下必须修改

To support rotation and scaling, I assume the following has to be modified:

1. 的矩阵在用于绘制（）应该复制从源头上缩放和旋转的DisplayObject ？
2. 的矩阵在 beginBitmapFill使用（）应该复制此缩放和旋转呢？或者，也许这将产生双重缩放和旋转？
3. 的的drawRect（）坐标应进行修改，以符合尺寸的缩放和旋转的DisplayObject ？这意味着的getBounds（）将不准确？

1. The Matrix used in draw() should copy the scaling and rotation from the source DisplayObject?
2. The Matrix used in beginBitmapFill() should copy this scaling and rotation as well? Or maybe that would create "double" scaling and rotation?
3. The drawRect() coordinates should be modified to match the size of the scaled and rotated DisplayObject? Which means getBounds() will not be accurate?

修改：这是一个工作的实施，支持缩放和旋转，从所有的反馈意见作出：

---

EDIT: Here is a working implementation which supports scaling and rotation, made from all the feedback:

static function DrawOntoGraphics(source:MovieClip, target:Graphics, 
        position:Point = null):void {
    var sourceClass:Class = getDefinitionByName(getQualifiedClassName(source)) 
        as Class;   
    var sourceCopy:MovieClip = new sourceClass();
    sourceCopy.rotation = source.rotation;
    sourceCopy.scaleX = source.scaleX;
    sourceCopy.scaleY = source.scaleY;
    sourceCopy.graphics.clear();
    var placeholder:MovieClip = new MovieClip();
    placeholder.addChild(sourceCopy);
    if (!position) 
        position = new Point();
    var bounds:Rectangle = placeholder.getBounds(placeholder);
    var bitmapData:BitmapData = new BitmapData(bounds.width, bounds.height, 
        true, 0x00000000);
    var drawMatrix:Matrix = new Matrix(1, 0, 0, 1, -bounds.x, -bounds.y);
    bitmapData.draw(placeholder, drawMatrix);           
    placeholder.removeChild(sourceCopy);
    var fillMatrix:Matrix = new Matrix(1, 0, 0, 1, bounds.x + position.x, 
        bounds.y + position.y);
    target.beginBitmapFill(bitmapData, fillMatrix);
    target.lineStyle(0, 0x00000000, 0);
    target.drawRect(bounds.x + position.x, bounds.y + position.y, 
        bounds.width, bounds.height);
    target.endFill();
}

---

有点关系，但没有这么热的问题：<一href="http://stackoverflow.com/questions/261386/how-to-put-an-image-say-png-on-a-graphics-in-flex-3">How将图像（例如，PNG）在图形中的Flex 3？

推荐答案

使用显示对象的getBounds功能可以是一个可靠的解决方案转换的坐标，而图：

Using the display objects getBounds function can be a reliable solution to translate the coordinates while drawing :

private function drawOntoGraphics(source : IBitmapDrawable, target : Graphics, position : Point = null) : void
{
        position = position == null ? new Point() : position;

        var bounds : Rectangle = DisplayObject(source).getBounds(DisplayObject(source));
        var bitmapData : BitmapData = new BitmapData(bounds.width, bounds.height, true, 0x00000000);

        bitmapData.draw(source, new Matrix(1, 0, 0, 1, -bounds.x, -bounds.y), null, null, null, true);
        target.beginBitmapFill(bitmapData, new Matrix(1, 0, 0, 1, bounds.x + position.x, bounds.y + position.y));
        target.drawRect(bounds.x + position.x, bounds.y + position.y, bounds.width, bounds.height);
}

在除了你的意见......下面以同样的方法使用的的BitmapData 而不是图形对象为画布：

In addition to your comments... Below the same method using a BitmapData instead of the Graphics object as canvas:

private function drawOntoBitmapData(source : IBitmapDrawable, target : BitmapData, position : Point = null) : void
{
    position = position == null ? new Point() : position;
    var bounds : Rectangle = DisplayObject(source).getBounds(DisplayObject(source));
    var bitmapData : BitmapData = new BitmapData(bounds.width, bounds.height, true, 0x00000000);
    bitmapData.draw(source, new Matrix(1, 0, 0, 1, -bounds.x, -bounds.y), null, null, null, true);
    target.draw(bitmapData, new Matrix(1, 0, 0, 1, bounds.x + position.x, bounds.y + position.y));
}

这篇关于闪光/动作：绘制显示对象＆QUOT;到＆QUOT;另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！