07
2015
10

用lineBitmapStyle画绳子

在flash中,线条笔触可以是纯色、渐变和位图,同样,用as3也可以实现。

这篇就来研究一下位图笔触。

位图笔触用lineBitmapStyle方法。

test01:

直接用lineBitmapStyle,指定bitmap,matrix初始化为默认值。

获得 Adobe Flash Player

为了看清楚,我将线宽设置为50像素,观察发现,位图的原点与线的原点重合,而线是上下对称的,也就是说我们的线宽是50像素的话,线的y坐标是从-25像素到25像素,我们需要matrix平移一下。而且,线宽50像素,画出来似乎是两条绳子,绳子位图是原始尺寸,所以我们还需要缩放一下。

test02:

直接用lineBitmapStyle,指定bitmap,matrix设置scale和translate。

获得 Adobe Flash Player

test03:

效果不错,下面我们再加上旋转(rotate)。需要注意旋转、平移缩放的顺序,不同的调用顺序,效果可能不一样。

获得 Adobe Flash Player

test04:

最后,我们让绳子跟着鼠标旋转。

获得 Adobe Flash Player

当然可以创建一个Shape,在Shape里画成水平的直线,再控制Shape的旋转。我比较倾向于这样做,简单不容易出错。


直线效果可以了,那么如果要做曲线呢?

直接用一次lineBitmapStyle,然后用贝塞尔曲线(比如curveTo),效果是不行的,其实我们可以通过分段的直线来画曲线。

画了一个圆形,如下。

获得 Adobe Flash Player

源码打包下载

« 上一篇下一篇 »

相关文章:

闪电效果  (2017-11-28 15:4:19)

线段与椭圆的交点  (2017-1-6 14:43:41)

as3录制swf并保存flv视频  (2016-12-28 8:43:41)

解九连环  (2016-12-1 20:58:11)

as3实现setTimeout和trace  (2016-11-10 16:47:37)

registerCursor注册系统光标  (2016-9-14 9:49:40)

鼠标光标管理  (2016-9-13 17:44:3)

变形框(transform)实现  (2016-9-13 16:56:6)

flash文本消除锯齿不显示  (2016-8-25 11:43:31)

greenSock的easing曲线  (2016-8-24 18:30:11)

评论列表:

1.fool_tiger  2015/12/17 10:14:07 回复该留言
如果线是动态画出的,如何用位图填充,且填充效果如test4那个效果?
2.fool_tiger  2015/12/17 10:43:21 回复该留言
test04中如果p1点位置是鼠标是点击的位置,位图填充效果就不太对了。
.hanyeah  2015/12/17 16:01:34 回复该留言
创建一个Shape对象,Shape对象的坐标挪到鼠标点下的位置,Shape里边不就是从(0,0)点开始画了吗。
画斜线的话,就让Shape旋转。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。