Skip to content

Latest commit

 

History

History
70 lines (61 loc) · 2.83 KB

README-CH.md

File metadata and controls

70 lines (61 loc) · 2.83 KB
Raw

bezierMaker.js

原生HTML5的canvas中所支持的贝塞尔曲线最多只到3阶

bezierMaker.js可以理论支持N阶贝塞尔曲线的生成，同时提供了试验场来自行添加拖拽控制点并形成绘制动画

Features

  • 试验场可添加任意数量控制点
  • 试验场支持展示曲线绘制的形成动画
  • 控制点可自由拖拽
  • 支持显示贝塞尔曲线形成过程的切线
  • 3阶及以下贝塞尔曲线的绘制采用原生API

ScreenShots

2017-12-28 17_21_52 2017-12-28 17_38_06

试验场传送门

Usage

引入

<script src="./bezierMaker.js"></script>

绘制

/**
 * canvas canvas的dom对象
 * bezierCtrlNodesArr 控制点数组，包含x，y坐标
 * color 曲线颜色
 */
var canvas = document.getElementById('canvas')
//3阶之前采用原生方法实现
var arr0 = [{x:70,y:25},{x:24,y:51}]
var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]
var arr2 = [{x:23,y:225},{x:70,y:79},{x:40,y:51},{x:300, y:44}]
var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239}]
var arr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551},{x:170,y:279}]
var bezier0 = new BezierMaker(canvas, arr0, 'black')
var bezier1 = new BezierMaker(canvas, arr1, 'red')
var bezier2 = new BezierMaker(canvas, arr2, 'blue')
var bezier3 = new BezierMaker(canvas, arr3, 'yellow')
var bezier4 = new BezierMaker(canvas, arr4, 'green')
bezier0.drawBezier()
bezier1.drawBezier()
bezier2.drawBezier()
bezier3.drawBezier()
bezier4.drawBezier()

Effect

image

在绘制复杂的高阶贝塞尔曲线时无法知道每个控制点的精确位置可以在试验场中进行模拟，将得到的点坐标变为对象数组传递进BezierMaker类即可。

About

bezierMake.js——N阶贝塞尔曲线生成器

License

Copyright (C) 2017 2103887953@qq.com

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.