JSFL自动绘画_2_三阶贝塞尔曲线画线

将贝塞尔曲线进行分段绘画，然后在库中保留绘画过的曲线，实际使用的时候，拿出来拼接摆放就可以了

统一曲线的起始点为中点，这样可以方便统一方法调用的绘画模式。

1.绘画心形

length_为x轴上两点间距离。通过这个控制点可以绘画出一半，复制翻转即可得到另一半。

2.绘画圆形

网络上查阅一些资料得知，控制点在半径0.55左右分别平行于xy轴就可以画出近似圆

弧度调整成原点为起点的话，需要同时调整控制点。由上图得知新的控制点位置。(所有贝塞尔曲线全都是0,0点开始绘画)

实现效果

应用了一个笔刷，这样能看清分段。

3.添加一些变动，用现有的图形拼接成新图形[圆周+旋转]。

将四个弧拼接的原型变成三个弧拼接的形状，看看是什么样子。要解决的是弧度的摆放问题，这相比控制点的座标变换就要做多了，这就是为什么要将圆拆分成四段相同的以0,0为起点的贝塞尔曲线，会简化很多运算。

//构成圆的四个弧，变成N个收尾相接构成新图形。
var _radious = 300;
var _n = 6;
var _shapeList = [];//形状
for (var _idx = 0; _idx < _n; _idx++) {//当前形状为四分之一圆。
    _shapeList.push(draw.quarterCircle(_radious));
}
//获得循环摆放所需要的各种参数
var _sqrt2 = Math.sqrt(2);
var _shapeSize = _radious * _sqrt2; //底边不变
var _perAngle = 360 / _n; //分割角随个数变化
var _angle = (90 - _perAngle * 0.5); //底角随分割角变化
var _r = (_shapeSize * 0.5) / Math.cos(_angle / 180 * Math.PI); //_r随底角变化
//添加元素，自然增加分割角度，自然拓展摆放半径，自然就在新的位置上首尾相接了。
for (var _idx = 0; _idx < _n; _idx++) {
    var _element = _shapeList[_idx];
    var _currentAngle = _perAngle * _idx; //当前所在角度 
    var _currentPos = other.rotatePo({ x: _r, y: 0}, { x: 0,y: 0},_currentAngle);
    _element.x = _currentPos.x;
    _element.y = _currentPos.y;
    _element.rotation = _currentAngle + _perAngle + _angle; //当前的角度基础上在偏移
}

如图所示，先写出四边形变化成三角形的。然后，在将3替换成n，达到n变形的效果

将圆弧替换成其他的形状，然后设置其对应于固定轴，自然就有了万花筒效果。

4.同一个长度下渐进调整控制点

var _length = 400;
var _xRangeXS = [0.5, 1.5];
var _yRangeXS = [1, 0.5];
var _times = 10;
var _per = 1 / _times;
for (var _idx = 0; _idx < 1; _idx += _per) {
    var _xPos = (_xRangeXS[0] + (_xRangeXS[1] - _xRangeXS[0]) * _idx);
    var _yPos = (_yRangeXS[0] + (_yRangeXS[1] - _yRangeXS[0]) * _idx);
    draw.drawCubicCurve(_length, {
        x: _xPos * _length,
        y: _yPos * _length
    }, {
        x: (1 - _xPos) * _length,
        y: _yPos * _length
    });
}

控制点在一定范围内移动。移动的同时绘画曲线。然后，交叉部分选择填充，做一个简单的动画~

工具镜像创建元件，铺设预设动画。加入透明，调整色阶。如下:

 

最后附上一张大宝剑

 

下一篇:

https://blog.csdn.net/u010816580/article/details/99447162