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

JSFL自动绘画_2_三阶贝塞尔曲线画线相关推荐

android运动轨迹怎么画,Android 利用三阶贝塞尔曲线绘制运动轨迹的示例
本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例,分享给大家,具体如下: 实现点赞效果,自定义起始点以及运动轨迹效果图: xml布局: xmlns:tools="ht ...
flutter绘图基础之三阶贝塞尔曲线cubicTo
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. 重要消息 [经验分享视频教程感兴趣的伙伴可以瞅瞅] 1 flutter 中绘制基础引言 Flutter 中实现绘制的主要是Custo ...
有趣的自定义View — 玫瑰·三阶贝塞尔曲线
"玫瑰贝塞尔曲线"效果如下: 一.效果要求 1)在布局中某个位置处玫瑰开始由小而大,淡入出现: 2)出现的玫瑰,颜色随机而定,玫瑰可在布局内做动画亦可在整个界面中做动画,如上图: ...
贝塞尔曲线是什么？如何用 Canvas 绘制三阶贝塞尔曲线？
大家好,我是前端西瓜哥. 今天谈谈贝塞尔曲线是什么以及它的原理,并说说如何用 Canvas 技术绘制一条三阶贝塞尔曲线. 贝塞尔曲线是什么? 贝塞尔曲线,是通过几个简单的参数描述一条曲线的一种参数曲线 ...
使用二阶贝塞尔曲线画出两点之间的连线
使用二阶贝塞尔曲线画出两点之间的连线二阶贝塞尔曲线公式控制点的位置游戏中需要手动生成多个点来连接两个关卡,以达到更加可视化的目的. 最终效果如图: 二阶贝塞尔曲线公式 B(t) = (1-t)2 ...
三阶贝塞尔曲线选点_用三阶贝塞尔曲线拟合圆
前言由于贝塞尔曲线控制简便且具有极强的描述能力,它常被用来生成复杂的平滑曲线:圆形是一种很常用的普通图形,在计算机图形学中也有很多画圆的算法,本文想探究一下如何用三阶贝塞尔曲线拟合圆形. 在研究这个 ...
[zz]用三阶贝塞尔曲线（贝兹曲线）拟合劣圆弧的公式（附伪代码）
转自:用三阶贝塞尔曲线(贝兹曲线)拟合劣圆弧的公式(附伪代码) 三阶贝塞尔曲线有四个控制点A.B.C.D, 若要用三阶贝塞尔曲线拟合劣圆弧,自然的要求是: 1)A位于圆弧的起点,D位于圆弧的终点: 2 ...
html5创建三次贝塞尔曲线,HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
在HTML5 Canvas中,可以用以下方法描画三阶和二阶的贝塞尔曲线: 复制代码代码如下: context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) c ...
【Android UI】贝塞尔曲线 ② ( 二阶贝塞尔曲线公式 | 三阶贝塞尔曲线及公式 | 高阶贝塞尔曲线 )
文章目录一.二阶贝塞尔曲线公式二.三阶贝塞尔曲线三.高阶贝塞尔曲线贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.二阶贝塞尔曲线公式二 ...
三次贝塞尔曲线画圆的方法。
上一篇说的仿58同城loadingview的项目,中有一个利用贝塞尔曲线进行绘制圆的步骤,这个贝塞尔曲线理论挺复杂,特此单独说一下所知的和能用到的. 比如上一个loadingView的项目中,要用到P ...

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

JSFL自动绘画_2_三阶贝塞尔曲线画线相关推荐

最新文章

热门文章