html5中的points,html5 canvas bezier curve get all the points

问题

I like to get some points from bezier curve.I found

Find all the points of a cubic bezier curve in javascript

Position is easy. First, compute the blending functions. These control the "effect" of your control points on the curve.

B0_t = (1-t)^3

B1_t = 3 * t * (1-t)^2

B2_t = 3 * t^2 * (1-t)

B3_t = t^3

Notice how B0_t is1 when t is 0 (and everything else is zero). Also, B3_t is 1 when t is 1 (and everything else is zero). So the curve starts at (ax, ay), and ends at (dx, dy).

Any intermediate point (px_t, py_t) will be given by the following (vary t from 0 to 1, in small increments inside a loop):

px_t = (B0_t * ax) + (B1_t * bx) + (B2_t * cx) + (B3_t * dx)

py_t = (B0_t * ay) + (B1_t * by) + (B2_t * cy) + (B3_t * dy)

My code

var ax = 100, ay = 250;

var bx = 150, by = 100;

var cx = 350, cy = 100;

var dx = 400, dy = 250;

ctx.lineWidth = 1;

ctx.strokeStyle = "#333";

ctx.beginPath();

ctx.moveTo(ax, ay);

ctx.bezierCurveTo(bx, by, cx, cy, dx, dy);

ctx.stroke();

var t = 0

var B0_t = (1 - t) ^ 3

var B1_t = 3 * t * (1 - t) ^ 2

var B2_t = 3 * t ^ 2 * (1 - t)

var B3_t = t ^ 3

// override manually *Notice* above

//This is work first and laste point in curve

// B0_t = 1; B1_t = 0; B2_t = 0; B3_t = 0; t = 0;

// B0_t = 0; B1_t = 0; B2_t = 0; B3_t = 1; t = 1;

var px_t = (B0_t * ax) + (B1_t * bx) + (B2_t * cx) + (B3_t * dx)

var py_t = (B0_t * ay) + (B1_t * by) + (B2_t * cy) + (B3_t * dy)

// doesnt work

var t = 0

var B0_t = (1 - t) ^ 3 //*Notice* above should be 1

//Debug (1 - t) ^ 3 = 2 ??

var B1_t = 3 * t * (1 - t) ^ 2 //*Notice* above should be 0

//Debug 3 * t * (1 - t) ^ 2 = 2 ??

var B2_t = 3 * t ^ 2 * (1 - t)//*Notice* above should be 0

//Debug 3 * t ^ 2 * (1 - t) =2 ??

var B3_t = t ^ 3//*Notice* above should be 0 but its 2

//Debug t ^ 3 = 3 ??

var px_t = (B0_t * ax) + (B1_t * bx) + (B2_t * cx) + (B3_t * dx)

var py_t = (B0_t * ay) + (B1_t * by) + (B2_t * cy) + (B3_t * dy)

Appreciate any help thanks

回答1:

How to find the pixels along a Bezier Curve

This set of functions will find an [x,y] point at interval T along cubic Bezier curve where 0<=T<=1.

In simple terms: It plots points along a cubic Bezier curve from start to end.

// Given the 4 control points on a Bezier curve

// get x,y at interval T along the curve (0<=T<=1)

// The curve starts when T==0 and ends when T==1

function getCubicBezierXYatPercent(startPt, controlPt1, controlPt2, endPt, percent) {

var x = CubicN(percent, startPt.x, controlPt1.x, controlPt2.x, endPt.x);

var y = CubicN(percent, startPt.y, controlPt1.y, controlPt2.y, endPt.y);

return ({

x: x,

y: y

});

}

// cubic helper formula

function CubicN(T, a, b, c, d) {

var t2 = T * T;

var t3 = t2 * T;

return a + (-a * 3 + T * (3 * a - a * T)) * T + (3 * b + T * (-6 * b + b * 3 * T)) * T + (c * 3 - c * 3 * T) * t2 + d * t3;

}

You can fetch the points along the curve by sending the plotting function a large number of T values between 0.00 & 1.00.

Example code and a demo:

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var cw=canvas.width;

var ch=canvas.height;

var cBez1=[{x:250,y: 120},{x:290,y:-40},{x:300,y:200},{x:400,y:150}]

drawBez(cBez1);

var cPoints=findCBezPoints(cBez1);

drawPlots(cPoints);

function findCBezPoints(b){

var startPt=b[0];

var controlPt1=b[1];

var controlPt2=b[2];

var endPt=b[3];

var pts=[b[0]];

var lastPt=b[0];

var tests=5000;

for(var t=0;t<=tests;t++){

// calc another point along the curve

var pt=getCubicBezierXYatT(b[0],b[1],b[2],b[3], t/tests);

// add the pt if it's not already in the pts[] array

var dx=pt.x-lastPt.x;

var dy=pt.y-lastPt.y;

var d=Math.sqrt(dx*dx+dy*dy);

var dInt=parseInt(d);

if(dInt>0 || t==tests){

lastPt=pt;

pts.push(pt);

}

}

return(pts);

}

// Given the 4 control points on a Bezier curve

// Get x,y at interval T along the curve (0<=T<=1)

// The curve starts when T==0 and ends when T==1

function getCubicBezierXYatT(startPt, controlPt1, controlPt2, endPt, T) {

var x = CubicN(T, startPt.x, controlPt1.x, controlPt2.x, endPt.x);

var y = CubicN(T, startPt.y, controlPt1.y, controlPt2.y, endPt.y);

return ({

x: x,

y: y

});

}

// cubic helper formula

function CubicN(T, a, b, c, d) {

var t2 = T * T;

var t3 = t2 * T;

return a + (-a * 3 + T * (3 * a - a * T)) * T + (3 * b + T * (-6 * b + b * 3 * T)) * T + (c * 3 - c * 3 * T) * t2 + d * t3;

}

function drawPlots(pts){

ctx.fillStyle='red';

// don't draw the last dot b/ its radius will display past the curve

for(var i=0;i

ctx.beginPath();

ctx.arc(pts[i].x,pts[i].y,1,0,Math.PI*2);

ctx.fill();

}

}

function drawBez(b){

ctx.lineWidth=7;

ctx.beginPath();

ctx.moveTo(b[0].x,b[0].y);

ctx.bezierCurveTo(b[1].x,b[1].y, b[2].x,b[2].y, b[3].x,b[3].y);

ctx.stroke();

}

body{ background-color: ivory; }

#canvas{border:1px solid red; margin:0 auto; }

Black line is context.bezierCurveTo
Red "line" is really dot-points plotted along the curve

来源：https://stackoverflow.com/questions/34681457/html5-canvas-bezier-curve-get-all-the-points