绘制二次贝塞尔曲线的几种方式

1.通过turf.js插件绘制

import * as turf from "@turf/turf";//P1,p2为起终点
export default function twoPointToCurveLine(p1, p2) {let line = [p1, p2].map((item) => item);const [p1x, p1y] = line[0];const [p2x, p2y] = line[1];// mid-point of line:const mpx = (p2x + p1x) * 0.5;const mpy = (p2y + p1y) * 0.5;// angle of perpendicular to line:const theta = Math.atan2(p2y - p1y, p2x - p1x) - Math.PI / 2;// distance of control point from mid-point of line:const distance = turf.distance(line[0], line[1], {units: "miles" });const offset = distance / 500;// location of control point:var c1x = mpx + offset * Math.cos(theta);var c1y = mpy + offset * Math.sin(theta);line.splice(1, 0, [c1x, c1y]);return turf.bezierSpline(turf.lineString(line), {sharpness: 1,resolution: distance > 3000 ? distance : 5000 * distance,}).geometry.coordinates;
}

2.通过canvas绘制

ctx.quadraticCurveTo( p1x, p1y, p2x, p2y )

p1x, p1y：控制点坐标

p2x, p2y：结束点坐标

function drawCurve() {const canvas = document.getElementById("tutorial");if (!canvas.getContext) return;let ctx = canvas.getContext("2d");ctx.beginPath();ctx.moveTo(10, 200); //起始点let cp1x = 40,cp1y = 100; //控制点let x = 200,y = 200; // 结束点//绘制二次贝塞尔曲线ctx.quadraticCurveTo(cp1x, cp1y, x, y);ctx.stroke();ctx.beginPath();ctx.rect(10, 200, 10, 10);ctx.rect(cp1x, cp1y, 10, 10);ctx.rect(x, y, 10, 10);ctx.fill();
}

绘制二次贝塞尔曲线的几种方式相关推荐

绘制二次贝塞尔曲线（二次贝兹曲线）等距线：让 IE 支持 canvas接口 isPointInPath
一.背景: 在使用 canvas 做知识图谱的时,实体关系使用线宽为 1px 的线绘制, 用户必须点在线上, 才能正常拾取到点击的边. 边关系,有些是直线边,有些是二次贝塞尔曲线.产品提议,线不能加粗 ...
使用canvas绘制水滴（二次贝塞尔曲线、圆弧）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Canvas贝塞尔曲线和二次贝塞尔曲线
贝塞尔曲线和二次曲线贝塞尔曲线大概就是ps中钢笔工具那个曲线 quadraticCurveTo(cp1x, cp1y, x, y) 从当前笔位置到由指定的结束点绘制的二次贝塞尔曲线x,并y使用由指定 ...
【绘制】HTML5 Canvas二次方贝塞尔曲线，实现复选框对勾对号，实现圆角三角形，圆角矩形（图文，示例）
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
【HTML 中的二次贝塞尔曲线和三次贝塞尔曲线】(使用说明详解)
二次贝塞尔曲线和三次贝塞尔曲线使用说明 1. 二次贝塞尔曲线和三次贝塞尔曲线 1.1 贝塞尔曲线的基本知识 1.2 贝塞尔曲线生成动图 1.3 HTML 中画贝塞尔曲线的 2 种方 ...
WPF绘制光滑连续贝塞尔曲线
原文:WPF绘制光滑连续贝塞尔曲线 1.需求 WPF本身没有直接把点集合绘制成曲线的函数.可以通过贝塞尔曲线函数来绘制. 贝塞尔曲线类是:BezierSegment,三次贝塞尔曲线,通过两个控制点来控 ...
openGL参数曲面----二次贝塞尔曲线
openGL系列文章目录文章目录 openGL系列文章目录前言一.二次贝塞尔曲线参考前言在20 世纪50 年代和60 年代在雷诺公司工作期间,皮埃尔·贝塞尔(Pierre Bézier)开 ...
如何求出二次贝塞尔曲线上面的各个点呢
1.需求:用 canvas 在上面的曲线上面加几个箭头,指明方向 2.问题:这个曲线我是第一次见,搞半天还发现不是圆的弧,是一种很奇怪的弧形,于是我就上网查 quadraticCurveTo 方法,才 ...
书小宅之网页设计——二次贝塞尔曲线和三次贝塞尔曲线
贝塞尔曲线起始点和终止点在曲线上,方向控制点不再曲线上.二次贝塞尔曲线有一个控制点,三次贝塞尔曲线有两个控制点. 二次贝塞尔曲线定义和用法 quadraticCurveTo() 方法通过使用表示二次 ...

绘制二次贝塞尔曲线的几种方式

绘制二次贝塞尔曲线的几种方式相关推荐

最新文章

热门文章