问如何创建始终打开不动点的弧线
EN

Stack Overflow用户

提问于 2015-01-08 09:06:50

回答 2查看 402关注 0票数 2

我试图在画布上创造一种向日葵效果，用弧线，我的几何学技巧生锈了。

首先，我在画布的中间创建了一个原点， (X1，Y1)，然后创建鼠标位置Mp (Xm，Ym)。

现在，如果我做了一条从到Mp的虚线，那么Mp应该是用一个新的较小的原点平分弧的点，这个点是在起源的方向上，它将定义一个静态半径的弧(例如20)。所有三点，Mp和较小的半径应该形成一条直线。

我想要它通过一个静态半径(比如说20)的弧线中心，而不管鼠标离原产地有多远。

所以，如果你想象一个时钟。如果手连接的中间部分是。

如果鼠标处于3点钟的位置，弧线看起来就像“)
如果鼠标处于9点钟的位置，弧线看起来就像“(
如果鼠标处于12点的位置，弧线看起来就像“”(如果它被旋转了90°)
如果鼠标处于6点钟的位置，弧线看起来就像“”(如果它被旋转270°)
等等。

鼠标就在弧形上。

对于我的问题，具体而言，问题不在于如何获得积分、鼠标事件或其他东西，而是假设我有{X1，Y1}和{Xm，Ym}，如上面所述，创建弧线所需的数学是什么？

或者对于JS/jQuery专家来说，arc() params？

编辑：一个非常糟糕的photoshop渲染

右下角有一个鼠标，用于显示绘制弧线/曲线时鼠标指针的一般位置。

canvas

geometry

trigonometry

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-08 10:51:32

最简单的方法是调整弧命令.的起始角和结束角。

你可以画一系列的弧线来形成你的花。

提示:如果你希望你的花瓣不那么圆，更弯曲，你可以使用quadraticCurveTo而不是弧形来画花瓣的外部。

祝你的项目好运！

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var cx=150;
var cy=150;
var radius=50;
var PI=Math.PI;
var startAngle=0-PI/8;
var sweepAngle=PI/4;
var nextTime=0;
var delay=250;

requestAnimationFrame(animate);

function draw(){

  ctx.clearRect(0,0,cw,ch);

  ctx.beginPath();
  ctx.arc(cx,cy,5,0,PI*2);
  ctx.closePath();
  ctx.fill();

  ctx.beginPath();
  ctx.arc(cx,cy,radius,startAngle,startAngle+sweepAngle);
  ctx.stroke();

}

function animate(time){
  requestAnimationFrame(animate);
  if(time>nextTime){
    draw();
    startAngle+=PI*2/30;
    nextTime+=delay;
  }
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

基于更多信息的加法

是的，我想你搞定了！

从鼠标位置mcx,mcy开始。

定义一个较小的圆心点相对于鼠标位置radianAngle的角度。

定义这个小中心点离鼠标中心点radius有多远。

计算小圆的中心点：

var scx = mcx + radius*Math.cos(radianAngle);
var scy = mcy + radius*Math.sin(radianAngle);

定义较小圆smallRadius的半径。

在较小的弧形sweepAngle上定义所需的总sweepAngle。

在你的小圆圈上定义弧的开始和结束角。这实际上很容易，因为您希望小弧“点”在鼠标点。提示:小弧的中心必须始终位于radianAngle的中点。因此，startingAngle = ( radianAngle - sweepAngle/2。

最后，你的“指向”鼠标的小角度变成：

ctx.arc( scx,scy, smallRadius, startingAngle, startingAngle+sweepAngle );

干杯!

票数 2

Stack Overflow用户

发布于 2015-01-09 14:07:14

添加仅仅是因为：

$(document).ready(function() {
      var canvas = $('#canvas');

      function getPosition(mouseEvent) {
        var x, y;
        x = mouseEvent.clientX;
        y = mouseEvent.clientY;
        return {
          X: x - canvas.offset().left,
          Y: y - canvas.offset().top
        };
      }

      $('#canvas').mousemove(function(e) {
        var origin = {
          x: 325,
          y: 100
        };
        var posit = getPosition(e)
        var degrees = Math.PI /
          180;
        var plotR = {
          X: 0,
          Y: 0
        };
        var radius = 15;
        var curveDeg = 65;
        var context = $('#canvas').get(0).getContext('2d');

        if (posit.X >= origin.x && posit.Y <= origin.y) {
          quadrant = 1;
        } else if (posit.X >= origin.x && posit.Y >= origin.y) {
          quadrant = 2;
        } else if (posit.X < origin.x && posit.Y >= origin.y) {
          quadrant = 3;
        } else {
          quadrant = 4;
        }

        deltaY = posit.Y - origin.y;
        deltaX = posit.X - origin.x;

        if (deltaX == 0) {
          distance = deltaY;
          plotR.X = origin.x;
          switch (quadrant) {
            case 2:
            case 3:
              plotR.Y = posit.Y - radius;
              break;
            case 1:
            case 4:
            default:
              plotR.Y = posit.Y + radius;
              break;
          }
        } else {
          distance = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
          slope = deltaY / deltaX;
          delta = radius / (Math.sqrt(1 + Math.pow(slope, 2)));

          switch (quadrant) {
            case 1:
              plotR.Y = posit.Y - slope * delta;
              plotR.X = posit.X - delta;
              break;
            case 2:
              plotR.Y = posit.Y - slope * delta;
              plotR.X = posit.X - delta;
              break;
            case 3:
              plotR.Y = posit.Y + slope * delta;
              plotR.X = posit.X + delta;

              break;
            case 4:
            default:
              plotR.Y = posit.Y + slope * delta;
              plotR.X = posit.X + delta;
              break;
          }
        }
        startAngle = Math.acos(deltaX / distance);
        if (quadrant == 1 || quadrant == 4) startAngle = -startAngle;


        context.clearRect(0, 0, 900, 400);

        // Draw Origin Point for reference, but not for production
        context.beginPath();
        context.lineWidth = 1;
        context.fillStyle = "#0000FF";
        context.strokeStyle = "#0000FF";
        context.arc(origin.x, origin.y, 3, 0, 2 * Math.PI, true);
        context.fill();

        // Drawn Calculated Origin point offset from Mouse in the direction of Origin Point
        context.beginPath();
        context.lineWidth = 1;
        context.fillStyle = "#00FF00";
        context.strokeStyle = "#00FF00";
        context.arc(plotR.X, plotR.Y, 3, 0, 2 * Math.PI, true);
        context.fill();

        // Draw 'Sunflower' Curve
        context.beginPath();
        context.lineCap = 'round';
        context.lineWidth = 3;
        context.strokeStyle = "#FF0000";
        context.arc(plotR.X, plotR.Y, radius, startAngle - (curveDeg * degrees / 2), startAngle + (curveDeg * degrees / 2), false);

        context.stroke();
        return;
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="650" height="200" style=" border: 1px #000 solid"></canvas>