发新话题
打印

[分享] 也谈curveTo画曲线

本帖已经被作者加入个人空间

也谈curveTo画曲线

zszen斑竹在http://space.flash8.net/bbs/thread-323198-1-1.html写的非常好,本人的这个帖子只不过是他的一点补充,但用本人用的是代数方面的知识
先谈一下思路:
(1)先求出p0、p1两点的中点:

代码是:
var zd_point = Point.interpolate(p0, p1, 0.5);
(2)求出直线p0p1的角度:
var p0_p1_jd:Number = Math.atan((p0.y-p1.y)/(p0.x-p1.x));
(3)求出直线p0p1的垂直方向(由N决定弯曲的方向):

var zd_jd:Number = p0_p1_jd+Math.pow(-1, N)*Math.PI/2;
(4)算出控制点(由L决定弯曲的程度):
var kz_point = new Point(zd_p.x+L*Math.cos(zd_jd), zd_p.y+L*Math.sin(zd_jd));
定义成函数:
import flash.geom.Point;
function qx_fc(p0oint, p1:Point, N:Number, L:Number) {
var zd_p:Point = Point.interpolate(p0, p1, 0.5);
var p0_p1_jd:Number = Math.atan((p0.y-p1.y)/(p0.x-p1.x));
var d:Number = Point.distance(p0, p1);
var zd_jd:Number = p0_p1_jd+Math.pow(-1, N)*Math.PI/2;
var kz_p:Point = new Point(zd_p.x+L*Math.cos(zd_jd), zd_p.y+L*Math.sin(zd_jd));
this.lineStyle(1, 0xff0000, 100);
this.moveTo(p0.x, p0.y);
this.curveTo(kz_p.x, kz_p.y, p1.x, p1.y);
}
效果

[ 本帖最后由 200398sb40whb 于 2008-1-20 12:44 编辑 ]

附件

curveTo.swf (30.09 KB)

2008-1-20 11:02, 下载次数: 452

TOP

不错不错
54371309[请发送:flash8会员问题]
正在更新中..070815   http://zszen.com

TOP

谢谢zszen版主指导:
今天思索着curveTo()除了能平滑曲线外,还能做什么呢?突然记得以前在论坛有人问到用flash能否做到“改变圆的形状”这个帖子,于是就动手做了一个,发现不尽人意,但既然做了,就放上来:
思路:
(1)生成一个圆:
var R:Number = 50;
_root.createEmptyMovieClip("_mc", -1);
_mc.lineStyle(2);
_mc.moveTo(Stage.width/2+R, Stage.height/2);
for (i=0; i<2*Math.PI+0.1; i += 0.1) {
_mc.lineTo(Stage.width/2+R*Math.cos(i), Stage.height/2+R*Math.sin(i));
}

(2)定义小点出现函数
var mc_array:Array = [];
function at_fc() {
for (i=0; i<4; i++) {
  mc_array = _mc.attachMovie("mc", "mc"+i, i, {_x:Stage.width/2+R*Math.cos(i*Math.PI/2), _y:Stage.height/2+R*Math.sin(i*Math.PI/2)});
}
bb = true;
}
(3)点击圆出现小点,点击小点粘附,松开接触粘附:
var b:Boolean = true;
var lisenter:Object = {};
lisenter.onMouseDown = function() {
if (_mc.hitTest(_xmouse, _ymouse)) {
  if (b) {
   at_fc();
   b = !b;
  }
  for (i=0; i<mc_array.length; i++) {
   if (mc_array.hitTest(_xmouse, _ymouse)) {
    mc_array.startDrag(true);
   }
  }
}
};
lisenter.onMouseUp = function() {
for (i=0; i<mc_array.length; i++) {
  mc_array.stopDrag();
}
};

(4)拖动启用curveTo();
lisenter.onMouseMove = function() {
var p_array:Array = [];
for (i=0; i<mc_array.length; i++) {
  p_array = new Point(mc_array._x, mc_array._y);
}
if (bb) {
  _mc.clear();
  for (i=0; i<mc_array.length-1; i++) {
   qx_fc(p_array, p_array[i+1], _mc);
  }
  qx_fc(p_array[mc_array.length-1], p_array[0], _mc);
}
};
Mouse.addListener(lisenter);
(5)画线函数:
function qx_fc(p0oint, p1oint, mc:MovieClip) {
var zd_point = Point.interpolate(p0, p1, 0.5);
var p0_p1_jd:Number = Math.atan((p0.y-p1.y)/(p0.x-p1.x));
var d:Number = Point.distance(p0, p1);
var L:Number = d/2.3;
var zd_jd:Number = p0.x>p1.x ? p0_p1_jd+Math.PI/2 : p0_p1_jd-Math.PI/2;
var kz_p:Point = new Point(zd_p.x+L*Math.cos(zd_jd), zd_p.y+L*Math.sin(zd_jd));
mc.lineStyle(2);
mc.moveTo(p0.x, p0.y);
mc.curveTo(kz_p.x, kz_p.y, p1.x, p1.y);
}
达到效果

全部代码:
import flash.geom.Point;
//画圆
var R:Number = 50;
var bb:Boolean = false;
_root.createEmptyMovieClip("_mc", -1);
_mc.lineStyle(2);
_mc.moveTo(Stage.width/2+R, Stage.height/2);
for (i=0; i<2*Math.PI+0.1; i += 0.1) {
_mc.lineTo(Stage.width/2+R*Math.cos(i), Stage.height/2+R*Math.sin(i));
}
//定义小点出现函数
var mc_array:Array = [];
function at_fc() {
for (i=0; i<4; i++) {
  mc_array = _mc.attachMovie("mc", "mc"+i, i, {_x:Stage.width/2+R*Math.cos(i*Math.PI/2), _y:Stage.height/2+R*Math.sin(i*Math.PI/2)});
}
bb = true;
}
//鼠标侦听
var b:Boolean = true;
var lisenter:Object = {};
lisenter.onMouseDown = function() {
if (_mc.hitTest(_xmouse, _ymouse)) {
  if (b) {
   at_fc();
   b = !b;
  }
  for (i=0; i<mc_array.length; i++) {
   if (mc_array.hitTest(_xmouse, _ymouse)) {
    mc_array.startDrag(true);
   }
  }
}
};
lisenter.onMouseUp = function() {
for (i=0; i<mc_array.length; i++) {
  mc_array.stopDrag();
}
};
lisenter.onMouseMove = function() {
var p_array:Array = [];
for (i=0; i<mc_array.length; i++) {
  p_array = new Point(mc_array._x, mc_array._y);
}
if (bb) {
  _mc.clear();
  for (i=0; i<mc_array.length-1; i++) {
   qx_fc(p_array, p_array[i+1], _mc);
  }
  qx_fc(p_array[mc_array.length-1], p_array[0], _mc);
}
};
Mouse.addListener(lisenter);
//重新画线
function qx_fc(p0:Point, p1:Point, mc:MovieClip) {
var zd_p:Point = Point.interpolate(p0, p1, 0.5);
var p0_p1_jd:Number = Math.atan((p0.y-p1.y)/(p0.x-p1.x));
var d:Number = Point.distance(p0, p1);
var L:Number = d/2.3;
var zd_jd:Number = p0.x>p1.x ? p0_p1_jd+Math.PI/2 : p0_p1_jd-Math.PI/2;
var kz_p:Point = new Point(zd_p.x+L*Math.cos(zd_jd), zd_p.y+L*Math.sin(zd_jd));
mc.lineStyle(2);
mc.moveTo(p0.x, p0.y);
mc.curveTo(kz_p.x, kz_p.y, p1.x, p1.y);
}


[ 本帖最后由 200398sb40whb 于 2008-1-21 09:26 编辑 ]

附件

fenbu .swf (1 KB)

2008-1-21 09:20, 下载次数: 52

TOP

发新话题