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