研究贝塞尔曲线, 定距等分 ...

https://en.wikipedia.org/wiki/Bézier_curve
贝塞尔曲线公式推导原理
https://www.cnblogs.com/equal/p/6414263.html
贝塞尔曲线原理(简单阐述)
https://www.cnblogs.com/hnfxs/p/3148483.html
n 阶贝塞尔曲线计算公式实现
https://blog.csdn.net/aimeimeits/article/details/72809382
[转]匀速贝塞尔曲线运动的实现
http://as3.iteye.com/blog/865587
贝塞尔曲线运动n阶追踪方程的数学原理及其匀速化方法和应用
https://blog.csdn.net/iSunwish/article/details/78935257

https://www.zhihu.com/question/27715729 如何得到贝塞尔曲线的曲线长度和 t 的近似关系？
https://www.geometrictools.com/Documentation/MovingAlongCurveSpecifiedSpeed.pdf

Approximation of a cubic bezier curve by circular arcs and vice versa
https://www.researchgate.net/publication/265893293_Approximation_of_a_cubic_bezier_curve_by_circular_arcs_and_vice_versa
Approximation of a planar cubic Bezier spiral by circular arcs
https://www.sciencedirect.com/science/article/pii/S0377042796000568

<html>
<head><meta charset="UTF-8"><title>二阶贝塞尔曲线</title><style type="text/css">.box {background-color: black;}</style>
</head><body>
<canvas id="canvas" class="box">canvas not supported, please use html5 browser.
</canvas>
</body>
<script>
window.onload = function() {var canvas = document.querySelector(".box");canvas.width = 800;canvas.height = 600;var origin = {x: 400, y: 550};var ctx = canvas.getContext('2d');ctx.beginPath();ctx.strokeStyle = "green";var p0 = {x: 140, y: 370};var p1 = {x: 340, y: 120};var p2 = {x: 690, y: 520};var p3 = {x: 230, y: 440};var t = 0, step = 0.005;//二阶贝塞尔曲线// function enterFrame() {//   t += step;//  var p = {};//        p.x = (1-t)**2 * p0.x + 2 * (1-t) * t * p1.x + t**2 * p2.x;//        p.y = (1-t)**2 * p0.y + 2 * (1-t) * t * p1.y + t**2 * p2.y;//        ctx.lineTo(p.x, p.y);//        ctx.stroke();//        if (t >= 1) {//         return;//        }//        requestAnimationFrame(enterFrame);//    }//    enterFrame();var radius = 7; ctx.fillStyle = "#EE9611";  //#2BD56Fctx.arc(p0.x, p0.y, radius, Math.PI*2, false);ctx.fill();ctx.closePath();ctx.beginPath();ctx.arc(p1.x, p1.y, radius, Math.PI*2, false);ctx.fill();ctx.closePath();ctx.beginPath();ctx.arc(p2.x, p2.y, radius, Math.PI*2, false);ctx.fill();ctx.closePath();ctx.beginPath();ctx.arc(p3.x, p3.y, radius, Math.PI*2, false);ctx.fill();ctx.closePath();ctx.beginPath();ctx.strokeStyle = "#8855AA";ctx.moveTo(p0.x, p0.y);ctx.lineTo(p1.x, p1.y);ctx.lineTo(p2.x, p2.y);ctx.lineTo(p3.x, p3.y);ctx.stroke();ctx.beginPath();ctx.strokeStyle = "green";ctx.moveTo(p0.x, p0.y);//三阶贝塞尔曲线function enterFrame() {t += step;var p = {};p.x = (1-t)**3 * p0.x + 3 * (1-t)**2 * t * p1.x + 3*(1-t)*t**2 * p2.x + t**3 * p3.x;p.y = (1-t)**3 * p0.y + 3 * (1-t)**2 * t * p1.y + 3*(1-t)*t**2 * p2.y + t**3 * p3.y;ctx.lineTo(p.x, p.y);ctx.stroke();if (t >= 1) {return;}requestAnimationFrame(enterFrame);}enterFrame();
}function getX(origin, x) {return origin.x + x;
}
function getY(origin, y) {return origin.y - y;
}
</script>
</html>

<html>
<head><meta charset="UTF-8"><title>贝塞尔曲线</title><style type="text/css">.box {/*float: left;*/background-color: black;}.ctrlBox {float: left;/*border: 1px solid #A0F;*/width: 400;/*height: 700;*/}</style>
</head><body>
<canvas id="canvas" class="box">canvas not supported, please use html5 browser.
</canvas>
<div class="ctrlBox"><p>p0:<span id="p0"></span><p><p>p1:<span id="p1"></span><p><p>p2:<span id="p2"></span><p><p>p3:<span id="p3"></span><p><p><span><input type="checkbox" name="cb" onclick="hideCbClick(event)" id="hideCb" />隐藏控制点</span></p>
</div>
</body>
<script>
window.onload = function() {var canvas = document.querySelector(".box");canvas.width = 800;canvas.height = 600;var ctx = canvas.getContext('2d');var t = 0, step = 0.01;//二阶贝塞尔曲线// function enterFrame() {//    t += step;//  var p = {};//        p.x = (1-t)**2 * p0.x + 2 * (1-t) * t * p1.x + t**2 * p2.x;//        p.y = (1-t)**2 * p0.y + 2 * (1-t) * t * p1.y + t**2 * p2.y;//        ctx.lineTo(p.x, p.y);//        ctx.stroke();//        if (t >= 1) {//         return;//        }//        requestAnimationFrame(enterFrame);//    }//    enterFrame();var p0 = DraggableCircle({x: 140, y: 370, dom: document.querySelector("#p0")});var p1 = DraggableCircle({x: 340, y: 120, dom: document.querySelector("#p1")});var p2 = DraggableCircle({x: 690, y: 520, dom: document.querySelector("#p2")});var p3 = DraggableCircle({x: 230, y: 440, dom: document.querySelector("#p3")});var draggables = [p0, p1, p2, p3];var selectedP;canvas.onmousedown = function(e) {var evt = e || event;//获取事件对象var x = evt.offsetX;var y = evt.offsetY;// console.log("clicked: " + x + ", " + y);for (var i = 0; i < draggables.length; i++) {var p = draggables[i];if (p.hitTest(x, y)) {selectedP = p;p.selected = true;break;}}};canvas.onmousemove = function(e) {if (selectedP) {var evt = e || event;//获取事件对象var x = evt.offsetX;var y = evt.offsetY;selectedP.move(x, y);}};canvas.onmouseup = function(e) {if (selectedP) {selectedP.selected = false;showCoordinates();selectedP = null;}};function showCoordinates() {draggables.forEach(p => p.dom.innerText = "x: " + p.x + ", y: " + p.y);}showCoordinates();var hideCb = document.querySelector("#hideCb");function enterFrame() {ctx.clearRect(0, 0, canvas.width, canvas.height);if (!hideCb.checked) {draggables.forEach(p => p.draw(ctx));for (var i = 0; i < draggables.length; i++) {var p = draggables[i];if (i === 0) {ctx.beginPath();ctx.strokeStyle = "#8855AA";ctx.moveTo(p.x, p.y);} else {ctx.lineTo(p.x, p.y);}}ctx.stroke();}var stepLen = 0.01;var tt = 0;ctx.beginPath();ctx.strokeStyle = "green";ctx.moveTo(draggables[0].x, draggables[0].y);while (tt <= 1) {var p = {};p.x = (1-tt)**3 * p0.x + 3 * (1-tt)**2 * tt * p1.x + 3*(1-tt)*tt**2 * p2.x + tt**3 * p3.x;p.y = (1-tt)**3 * p0.y + 3 * (1-tt)**2 * tt * p1.y + 3*(1-tt)*tt**2 * p2.y + tt**3 * p3.y;ctx.lineTo(p.x, p.y);tt += stepLen;}ctx.stroke();requestAnimationFrame(enterFrame);}enterFrame();
}var DraggableCircle = function(point) {var that = {dom: point.dom,x: point.x,y: point.y,radius: 7,selected: false,hitTest: function(x2, y2) {var distance = (that.x-x2)**2 + (that.y-y2)**2;return distance <= that.radius**2;},move: function(x3, y3) {that.x = x3;that.y = y3;},draw: function(ctx) {ctx.beginPath();ctx.fillStyle = "#EE9611"; if (that.selected) {ctx.fillStyle = "#2BD56F";}ctx.arc(that.x, that.y, that.radius, Math.PI*2, false);ctx.fill();ctx.closePath();}};return that;
};function hideCbClick(event) {console.log("hide checkbox checked: " + event.target.checked);
}</script>
</html>

用微积分对二阶贝塞尔曲线，进行定距等分

相应的 javascript 代码如下：

<html>
<head><meta charset="UTF-8"><title>贝塞尔曲线</title><style type="text/css">.box {/*float: left;*/background-color: black;}.ctrlBox {float: left;/*border: 1px solid #A0F;*/width: 400;/*height: 700;*/}</style>
</head><body>
<canvas id="canvas" class="box">canvas not supported, please use html5 browser.
</canvas>
<div class="ctrlBox"><p>p0 = {<span id="p0"></span>}<p><p>p1 = {<span id="p1"></span>}<p><p>p2 = {<span id="p2"></span>}<p><p>p3 = {<span id="p3"></span>}<p><p><span><input type="checkbox" name="cb" onclick="hideCbClick(event)" id="hideCb" />隐藏控制点</span></p>
</div></body>
<script>
var moreAccurate = true;    //false表示不考虑二阶导数的保号性，即忽略掉拐点
window.onload = function() {var canvas = document.querySelector(".box");canvas.width = 800;canvas.height = 600;var ctx = canvas.getContext('2d');var t = 0, step = 0.01;var p0 = DraggableCircle({x: 140, y: 370, dom: document.querySelector("#p0")});var p1 = DraggableCircle({x: 340, y: 120, dom: document.querySelector("#p1")});var p2 = DraggableCircle({x: 690, y: 520, dom: document.querySelector("#p2")});var p3 = DraggableCircle({x: 230, y: 440, dom: document.querySelector("#p3")});var draggables = [p0, p1, p2];var selectedP, curveObj;var dividePoints = [];var dividePoints2 = [];var dividePoints3 = [];function divideCurve(curveObj, divideObj) {var subLen = divideObj.len;var total = curveObj.len;if (divideObj.partNum) {subLen = total / divideObj.partNum;}var curLen = subLen;var arr = [];while (curLen < total) {arr.push(divideCurveBy(curveObj, curLen));curLen += subLen;}return arr;}//从起始点算起的长度 subLenfunction divideCurveBy(curveObj, subLen) {var f_x0, x0, f_x_1; //f_x_1 表示 f(x)的一阶导数var considerSpinodal = moreAccurate && curveObj.part1 > 0;var subLen2 = subLen;if (curveObj.a > 0 ) {x0 = curveObj.b;// f_x0 = subLen;f_x0 = curveObj.len - subLen;considerSpinodal = considerSpinodal && curveObj.part1 > subLen;if (considerSpinodal) {subLen2 -= curveObj.len - subLen - curveObj.part2;//curveObj.part1 - subLen;f_x0 = subLen2;x0 = curveObj.t0_2;}} else {x0 = curveObj.a;f_x0 = -subLen;considerSpinodal = considerSpinodal && curveObj.part1 < subLen;if (considerSpinodal) {subLen2 = subLen - curveObj.part1;f_x0 = -subLen2;x0 = curveObj.t0_2;}}   f_x_1 = Math.sqrt(x0 * x0 + curveObj.C) * 2/curveObj.A;var accuracy = 0.0001;var x = -1;while (true) {x = x0 - f_x0 / f_x_1;// console.log("divideCurveBy, x=" + x);if (Math.abs(x - x0) <= accuracy) {break;}x0 = x;if (curveObj.a > 0 ) {// f_x0 = curveObj.foo(x) - curveObj.yb + subLen2;if (considerSpinodal) {f_x0 = curveObj.foo(x) - curveObj.y0 + subLen2;} else {f_x0 = curveObj.foo(x) - curveObj.yb + curveObj.len - subLen;}} else {if (considerSpinodal) {f_x0 = curveObj.foo(x) - curveObj.y0 - subLen2;} else {f_x0 = curveObj.foo(x) - curveObj.ya - subLen;}}f_x_1 = Math.sqrt(x * x + curveObj.C) * 2/curveObj.A;}var t = (x - curveObj.B/(2*curveObj.A)) / curveObj.A;// console.log("divideCurveBy, t=" + t);var p = {};p.x = (1-t)**2 * p0.x + 2 * (1-t) * t * p1.x + t**2 * p2.x;p.y = (1-t)**2 * p0.y + 2 * (1-t) * t * p1.y + t**2 * p2.y;return p;}function getCurveLen() {var a_x = p0.x - 2*p1.x + p2.x;var b_x = p1.x - p0.x;var a_y = p0.y - 2*p1.y + p2.y;var b_y = p1.y - p0.y;var A = Math.sqrt(a_x**2 + a_y**2);var B = 2*(a_x*b_x + a_y*b_y);var C = b_x**2 + b_y**2 - B*B/(4*A*A);var xb = (2*A*A + B)/(2*A), xa = B/(2*A),len=0;var T0 = -B/(2*A*A); //原函数的二阶导数为零，原函数在x = T0处的点，是拐点var part1 = -1, yb, ya;   //二阶导数小于零的长度if (C >= 0) {yb = curve2_1(C, xb) / A;ya = curve2_1(C, xa) / A;len = yb - ya;if (isBetween(xa, xb, T0)) {part1 = curve2_1(C, T0) / A - ya;}} else {yb = curve2_2(C, xb) / A;ya = curve2_2(C, xa) / A;len = yb - ya;if (isBetween(xa, xb, T0)) {part1 = curve2_2(C, T0) / A - ya;}}console.log("len = " + len + ", xb="+xb+", xa="+xa+ ", yb="+yb+", ya="+ya+", C="+C+", B="+B+", A="+A+", T0="+T0+", part1="+part1);//T == 0var obj = {len:len, t0_2:T0, part1: part1, a: xa, b: xb, ya:ya, yb:yb, C:C, A:A, B:B,foo:function(x) {if (obj.C >= 0) {return curve2_1(obj.C, x) / obj.A;} else {return curve2_2(obj.C, x) / obj.A;}}};obj.y0 = obj.foo(T0);obj.part2 = obj.len - obj.part1;return obj;}function isBetween(min, max, val) {return min < val && val < max;}//以直带曲，第二种朴素的，适用范围更广,但效率较低的定距等分方法function divideCurve2(subLen) {var step = 0.001, t = 0;var p = {};var sum = 0, dd = 0;var start = {x: p0.x, y: p0.y};var divides = [];while (t <= 1) {p.x = (1-t)**2 * p0.x + 2 * (1-t) * t * p1.x + t**2 * p2.x;p.y = (1-t)**2 * p0.y + 2 * (1-t) * t * p1.y + t**2 * p2.y;var d = Math.sqrt((p.x - start.x)**2 + (p.y - start.y)**2);sum += d;dd += d;if (dd >= subLen) {dd = 0;divides.push({x: p.x, y: p.y});}t += step;start.x = p.x;start.y = p.y;}console.log("divideCurveBy2, total len: " + sum);return divides;}curveObj = getCurveLen();dividePoints = divideCurve(curveObj, {partNum: 10});dividePoints2 = divideCurve2(curveObj.len/10);// dividePoints = [divideCurveBy(curveObj, curveObj.len*0.3)];function curve2_1(C, x) {return x * Math.sqrt(x*x + C) + C * Math.log(x + Math.sqrt(x*x + C));}function curve2_2(C, x) {var c = -C;return x * Math.sqrt(x*x - c) - c * Math.log(Math.abs(x + Math.sqrt(x*x - c) ) );}canvas.onmousedown = function(e) {var evt = e || event;//获取事件对象var x = evt.offsetX;var y = evt.offsetY;// console.log("clicked: " + x + ", " + y);for (var i = 0; i < draggables.length; i++) {var p = draggables[i];if (p.hitTest(x, y)) {selectedP = p;p.selected = true;break;}}};canvas.onmousemove = function(e) {if (selectedP) {var evt = e || event;//获取事件对象var x = evt.offsetX;var y = evt.offsetY;selectedP.move(x, y);}};canvas.onmouseup = function(e) {if (selectedP) {selectedP.selected = false;showCoordinates();curveObj = getCurveLen();dividePoints = divideCurve(curveObj, {partNum: 10// len: 30});dividePoints2 = divideCurve2(curveObj.len/10);selectedP = null;}};function showCoordinates() {draggables.forEach(p => p.dom.innerText = "x: " + p.x + ", y: " + p.y);}showCoordinates();var hideCb = document.querySelector("#hideCb");function enterFrame() {ctx.clearRect(0, 0, canvas.width, canvas.height);if (!hideCb.checked) {draggables.forEach(p => p.draw(ctx));for (var i = 0; i < draggables.length; i++) {var p = draggables[i];if (i === 0) {ctx.beginPath();ctx.strokeStyle = "#8855AA";ctx.moveTo(p.x, p.y);} else {ctx.lineTo(p.x, p.y);}}ctx.stroke();}var stepLen = 0.01;var tt = 0;ctx.beginPath();ctx.strokeStyle = "green";ctx.moveTo(draggables[0].x, draggables[0].y);while (tt <= 1) {var p = {};// p.x = (1-tt)**3 * p0.x + 3 * (1-tt)**2 * tt * p1.x + 3*(1-tt)*tt**2 * p2.x + tt**3 * p3.x;// p.y = (1-tt)**3 * p0.y + 3 * (1-tt)**2 * tt * p1.y + 3*(1-tt)*tt**2 * p2.y + tt**3 * p3.y;p.x = (1-tt)**2 * p0.x + 2 * (1-tt) * tt * p1.x + tt**2 * p2.x;p.y = (1-tt)**2 * p0.y + 2 * (1-tt) * tt * p1.y + tt**2 * p2.y;ctx.lineTo(p.x, p.y);tt += stepLen;}ctx.stroke();var pp = {};tt = curveObj.t0_2;if ( tt >= 0 && tt <= 1) {pp.x = (1-tt)**2 * p0.x + 2 * (1-tt) * tt * p1.x + tt**2 * p2.x;pp.y = (1-tt)**2 * p0.y + 2 * (1-tt) * tt * p1.y + tt**2 * p2.y;ctx.beginPath();ctx.fillStyle = "#4DB39E";ctx.arc(pp.x, pp.y, 4, Math.PI*2, false);ctx.fill();ctx.closePath();}dividePoints.forEach(dp => {ctx.beginPath();ctx.fillStyle = "#EE11C2";ctx.arc(dp.x, dp.y, 4, Math.PI*2, false);ctx.fill();ctx.closePath();});dividePoints2.forEach(dp => {ctx.beginPath();ctx.fillStyle = "#694ED3";ctx.arc(dp.x, dp.y, 4, Math.PI*2, false);ctx.fill();ctx.closePath();});requestAnimationFrame(enterFrame);}enterFrame();
}var DraggableCircle = function(point) {var that = {dom: point.dom,x: point.x,y: point.y,radius: 7,selected: false,hitTest: function(x2, y2) {var distance = (that.x-x2)**2 + (that.y-y2)**2;return distance <= that.radius**2;},move: function(x3, y3) {that.x = x3;that.y = y3;},draw: function(ctx) {ctx.beginPath();ctx.fillStyle = "#EE9611"; if (that.selected) {ctx.fillStyle = "#2BD56F";}ctx.arc(that.x, that.y, that.radius, Math.PI*2, false);ctx.fill();ctx.closePath();}};return that;
};function hideCbClick(event) {console.log("hide checkbox checked: " + event.target.checked);
}</script>
</html>

moreAccurate = false;
divideCurveBy, x=10.07993902100614
curve.html:94 divideCurveBy, x=48.34371660200954
curve.html:94 divideCurveBy, x=48.084959281910635
curve.html:94 divideCurveBy, x=48.08493456734062

moreAccurate = true
divideCurveBy, x=48.37720923128524
curve.html:95 divideCurveBy, x=48.08496610650087
curve.html:95 divideCurveBy, x=48.084934567340724

研究贝塞尔曲线, 定距等分 ...相关推荐

曲线之美（一）贝塞尔曲线
在图形图像编程时,我们常常需要根据一系列已知点坐标来确定一条光滑曲线.其中有些曲线需要严格地通过所有的已知点,而有些曲线却不一定需要.在后者中,比较有代表性的一类曲线是贝塞尔曲线(Bézier Spl ...
arcgis将直线等分_如何快速定数等分一条线段？
在日常的CAD绘图工作中,我们常常需要对精准的等分各种线段线条.现在已知线段等分主要是分为定数和定距等分.其中定数等分的命令是:DIVIDE.,快捷键是 div.那么我们该如何快速定数等分一条线段呢? ...
ABCNet 精读：使用自适应贝塞尔曲线网络进行进行实时场景文本定位 OCR 文本定位文本检测 CVPR
文章目录 ABCNet 导读:使用自适应贝塞尔曲线网络进行进行实时场景文本定位 ABCNet:Real-time Scene Text Spotting with Adaptive Bezier-Cu ...
CAD绘制等分点（定距、定数）
练习用CAD绘制等分点分成两种,分别为定距分点和定数分点前者指按照一定的距离在给出的线上绘制等分点后者将已知的线分为确定的份数,绘制等分点这里用绘制燃气灶的燃气孔为例: 首先绘制两个长方形作为 ...
技术分享 | 一条神奇的曲线——贝塞尔曲线在前端的应用
源宝导读:在前端的开发中我们经常会遇到利用贝塞尔曲线帮助我们完成前端的动画和图形绘制,但是对其中的一些参数配置是一头雾水.本文将从贝塞尔曲线的原理讲起,由浅入深剖析一阶到多阶贝塞尔的实现原理,最后从三 ...
Android开发之使用贝塞尔曲线实现黏性水珠下拉效果
Android开发之使用贝塞尔曲线实现黏性水珠下拉效果标签: 贝塞尔曲线简介网上关于贝塞尔曲线的博客和教程很多,通常讲到的三点确定一条曲线:起点,终点,辅助点. 常见的贝塞尔黏性效果常见的各阶 ...
Android 贝塞尔曲线实战之网易云音乐鲸云特效
作者:哈哈将 -个推 Android 高级开发工程师前言 APP开发市场已经告别"野蛮生长"时代,人们不再满足于APP外形创新,而将目光转向全方面的用户体验上.在这过程中,动效化 ...
Flutter 贝塞尔曲线实现案例
前言: 各位同学大家好,有段时间没有给大家更新文章了,趁着今天有时间我们就给大家分享一个flutter的贝塞尔曲线的绘制的案例,希望能帮助到各位同学的学习和工作,那么废话不多说我们正式开始 . 准备工 ...
Android自定义view详解，使用实例，自定义属性，贝塞尔曲线
//只会触发执行onDraw方法,只会改变绘制里面的内容,条目的绘制 invalidate(); //只会触发执行onDraw方法,但是可以在子线程中刷新 postInvalidate(); //vi ...

研究贝塞尔曲线, 定距等分 ...

研究贝塞尔曲线, 定距等分 ...相关推荐

最新文章

热门文章