使用LineStyle笔划的图形上的BitmapData.draw()

时间:2013-04-09 19:22:53

标签: actionscript-3

我使用Shape.graphics.drawRoundRect()绘制的形状,并应用了lineStyle。我正在尝试使用Bitmap将该形状捕获为BitmapData.draw(),但我遇到了中风的问题。见下文:

enter image description here

如您所见,使用draw()(和drawWithQuality())时,笔划会被剪裁。该线以对象为中心绘制,因此厚度为4(如我在示例中所使用的)在形状区域外有2个像素,在其内部有2个像素。 draw()捕获从(0,0)到(BitmapData.width,BitmapData.height)的所有内容,看起来如此,因此(0,0)左侧和顶部的所有内容都将丢失。我试图使用clipRect选项进行补偿,但这恰好使剪裁的边框平滑,具有讽刺意味。

知道如何捕获剩余数据吗?

2 个答案:

答案 0 :(得分:3)

作为一种更通用的解决方案,您可以在自己的坐标空间中获取对象的边界,并使用它来设置BitmapData的大小并偏移draw()

import flash.geom.Matrix;
import flash.geom.Rectangle;

const thickness:int = 4;
const radius:int = 10;
const size:int = 100;

var shape:Shape = new Shape();
shape.graphics.lineStyle( thickness, 0xaaaaaa );
shape.graphics.beginFill( 0xdddddd );
shape.graphics.drawRoundRect( 0, 0, size, size, radius, radius );
shape.graphics.endFill();
addChild( shape );

var bounds:Rectangle = shape.getBounds(shape);
var m:Matrix = new Matrix();
m.translate(-bounds.left, -bounds.top);

var bmp1:Bitmap = new Bitmap();
bmp1.bitmapData = new BitmapData( bounds.width, bounds.height, true, 0 );
bmp1.x = 310;
bmp1.y = 100;
addChild( bmp1 );
bmp1.bitmapData.draw( shape, m );

答案 1 :(得分:1)

当然,第二个我发布问题,我找到了做到这一点的方法。你必须偏移你的形状以匹配边界之外的线,并补偿线在使用绘图时添加到形状的额外尺寸

const thickness:int = 4;
const radius:int = 10;
const size:int = 100;

var shape:Shape = new Shape();
shape.graphics.lineStyle( thickness, 0xaaaaaa );
shape.graphics.beginFill( 0xdddddd );
shape.graphics.drawRoundRect( thickness / 2, thickness / 2, size, size, radius, radius );
shape.graphics.endFill();
addChild( shape );

var bmp1:Bitmap = new Bitmap();
bmp1.bitmapData = new BitmapData( size + thickness, size + thickness, true, 0 );
bmp1.x = 310;
bmp1.y = 100;
addChild( bmp1 );
bmp1.bitmapData.draw( shape );

在此处查看结果(您可以忽略剪辑矩形):

enter image description here