如何在没有ctx.bezierCurveTo的情况下使用本机Javascript代码绘制Bezier曲线? [英] How to draw Bezier curves with native Javascript code without ctx.bezierCurveTo?

问题描述

我需要在没有ctx.bezierCurveTo方法的情况下使用本机Javascript绘制并获取每个步骤的贝塞尔曲线的坐标.

I need to draw and get coordinates of bezier curves of each steps with native Javascript without ctx.bezierCurveTo method.

我找到了几种资源，但我感到困惑.特别是这看起来很接近，但是我无法清楚地实现.

I found several resources, but I confused. Esspecially this looks pretty close, but I couldnt implemented clearly.

我该怎么做?

推荐答案

您可以绘制贝塞尔曲线:

You can plot out the Bezier:

bezier = function(t, p0, p1, p2, p3){
  var cX = 3 * (p1.x - p0.x),
      bX = 3 * (p2.x - p1.x) - cX,
      aX = p3.x - p0.x - cX - bX;

  var cY = 3 * (p1.y - p0.y),
      bY = 3 * (p2.y - p1.y) - cY,
      aY = p3.y - p0.y - cY - bY;

  var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;
  var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;

  return {x: x, y: y};
},

(function(){
  var accuracy = 0.01, //this'll give the bezier 100 segments
      p0 = {x: 10, y: 10}, //use whatever points you want obviously
      p1 = {x: 50, y: 100},
      p2 = {x: 150, y: 200},
      p3 = {x: 200, y: 75},
      ctx = document.createElement('canvas').getContext('2d');

  ctx.width = 500;
  ctx.height = 500;
  document.body.appendChild(ctx.canvas);

  ctx.moveTo(p0.x, p0.y);
  for (var i=0; i<1; i+=accuracy){
     var p = bezier(i, p0, p1, p2, p3);
     ctx.lineTo(p.x, p.y);
  }

  ctx.stroke()
})()

这是一个小提琴 http://jsfiddle.net/fQYsU/

这篇关于如何在没有ctx.bezierCurveTo的情况下使用本机Javascript代码绘制Bezier曲线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！