具有固定长度的Javascript画布曲线 [英] Javascript canvas curve with fixed length

问题描述

我想绘制任意（随机）曲线，给定：

• 起点


• 结束点


• 曲线长度

我怎样才能做出受画布边界限制的事情，加上曲线不能交叉。我试图找到一些解决方案，但我无法弄明白。感谢您的时间。

以下是我想要完成的更详细的视图：

这是二次方的在画布上绘制的曲线。一切都好。问题是，如何在没有所有点的情况下绘制这个，只是以像素为单位的固定长度，随机点，以画布大小和非交叉为界。

代码看起来像这样：

  function fixedCurve（A，B，length）{
 for（int i = A; i< B; i ++） ）{
 //用propper距离计算随机点以获得第一个基点，可以在循环之前计算随机方向。 
 //基本上这个循环应该计算曲线的积分并在每一步绘制它。 
} 
} 
  

解决方案

尝试这（：

因此对于特定的x1和x2，我们可以计算出u（x）的等价值，然后计算积分。

使用控制点绘制一般二次曲线涉及将等式转换为顶点形式，如您所见本教程页面。明智的做法是用这个等式重复数学，然后用正确的术语得到一个新的'u'等式。

I want to draw any ( randomized ) curve, with given:

• start point
• end point
• curve length

How can I do such a thing limited by canvas boundaries, plus the curve can not cross. I was trying to find some solution but I can't figure this out. Thanks for your time.

Here is more detailed view of what I want to accomplish:

This is Quadratic curve drawn on canvas. Everything is fine. Question is, how to draw this without all the points, just with the fixed length in pixels, random points, bounded by canvas size and non crossing.

The code could look something like this:

function fixedCurve( A, B, length ){
    for(int i = A; i < B; i++){
        //Calculate random point with propper distance to get first base point, random direction could be calculated before loop.
        //Basicly this loop should calculate integrate of the curve and draw it each step.
    }
}

解决方案

Try this (fiddle):

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillStyle = "red";

  ctx.beginPath();
  var start = [20, 100];
  var end = [120, 100];
  var above = Math.random()*80+20;
  // find the mid point between the ends, and subtract distance above
  //   from y value (y increases downwards);
  var control = [0.5*(start[0]+end[0]), 0.5*(start[1]+end[1])-above];    
  ctx.moveTo(start[0], start[1]);

  ctx.quadraticCurveTo(control[0], control[1], end[0], end[1]); 
  ctx.stroke();
}

draw();

This is using quadraticCurveTo to draw a quadratic curve, given two points and calculating a random control point 20 to 100 pixels above the midpoint of the curve.

---

If you want the quadratic to have a specific arc length (which is sounds like you might from the question), then we can do some maths. Arc length of a quadratic (parabola) is:

We have the equation, so work out the derivative:

So if we define this to be u(x), Wolfram alpha gives us:

So for a particular x1 and x2, we could work out the equivalent values of u(x), and then therefore the integral.

Drawing a general quadratic using the control point involves converting the equation to vertex form as you can see on this tutorial page. The sensible thing would be to repeat the maths with that equation to start with, and get a new equation for 'u' in the right terms.

这篇关于具有固定长度的Javascript画布曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！