Question

有一段时间我一直在尝试使用JavaScript将此功能实现到我的HTML5 Canvas中。这是一个示例图片：

Here's an example picture.

您可以在上面看到一个示例，我只是为了帮助自己告诉您我想要实现的目标。我要做的是以下内容：画布上有一个给定的X，Y坐标，这一点是两条线的固定起点。两条线之间的角度应始终固定，例如：40°。这两条线应该跟在鼠标之间，它们之间有一个固定的角度。搜索网站我可以实现此功能的以下状态：基于this tutorial我可以创建跟随鼠标的两条线，并且两条线的终点总是远离鼠标100px，但是，当然，这不会给我一个固定的角度，角度会发生变化当我在画布上移动鼠标时。

这是我的JS代码中绘制两行的部分：

  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.moveTo(xcoord, ycoord);
  context.lineTo(ev._x+100, ev._y);
  context.stroke();
  context.closePath();

  context.beginPath();
  context.moveTo(xcoord, ycoord);
  context.lineTo(ev._x-100, ev._y);
  context.stroke();
  context.closePath();

如果我用鼠标单击并且我没有释放按钮，则两条线跟随鼠标，这就是context.clearRect部分存在的原因。

任何帮助都会非常感激，因为我自己无法解决这个问题。

Answer 1

首先，获得所需的行长度：

var delta = {x: event.x - coord.x, y: event.y - coord.y};
var len = Math.sqrt(delta.x*delta.x + delta.y*delta.y);

然后获得角度（使用atan2），并添加40°：

var angle = Math.atan2(delta.y, delta.x);
var angle_left = angle + 40 / 180 * Math.PI;
var angle_right = angle - 40 / 180 * Math.PI;

现在你可以从中获得积分：

var left = {
    x: coord.x + Math.cos(angle_left) * len,
    y: coord.y + Math.sin(angle_left) * len
};
var right = {
    x: coord.x + Math.cos(angle_right) * len,
    y: coord.y + Math.sin(angle_right) * len
};

（Demo at jsfiddle.net - Your fiddle updated）

Answer 2

那怎么样？：http://edumax.org.ro/extra/new/Stack2/

var canvas, ctx;

function viewDidLoad(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 500;
canvas.addEventListener("mousemove", mouse_move_handler, false);
}


var px, py;

function mouse_move_handler(e){
var mouse = getCursorPosition(e);

var centreX = canvas.width/2;
var centreY = canvas.height/2;


var line = Math.sqrt( (mouse.y-centreY)*(mouse.y-centreY)+(mouse.x-centreX)*(mouse.x-centreX));

var k1 = 100;
var k2 = line-100;

var dx  =(mouse.x-centreX)/ line;
var dy = (mouse.y-centreY)/line;

var x1 = mouse.x+100*dy;
var x2 = mouse.x-100*dy;
var y1= mouse.y-100*dx;
var y2= mouse.y+100*dx;

if(line>=100){
px = ((k1*centreX) + (k2*mouse.x))/(k1+k2);
py = ((k1*centreY)+(k2*mouse.y))/(k1+k2);



canvas.width = canvas.width;
ctx.fillStyle="#00ffaa";
ctx.fillRect(0, 0, 500, 500);
ctx.beginPath();
ctx.moveTo(x1, y1);

ctx.lineTo(px, py);
ctx.lineTo(x2, y2);

ctx.lineWidth = 5;
ctx.strokeStyle = "Black";
ctx.stroke();
ctx.closePath();
}
}

// Get Current Mouse Position
function getCursorPosition(e) {
    var x, y;
    if (e.layerX || e.layerY) {
        x = e.layerX;
        y = e.layerY;
    }
    else {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }               
    return {x:x, y:y};
    }
window.onload = viewDidLoad;

Answer 3

这是你需要的吗？您可以在此处查看工作示例：http://edumax.org.ro/extra/new/Stack1/

var canvas, ctx;

function viewDidLoad(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 500;
canvas.addEventListener("mousemove", mouse_move_handler, false);
}

function mouse_move_handler(e){
var mouse = getCursorPosition(e);
canvas.width = canvas.width;
ctx.fillStyle="#00ffaa";
ctx.fillRect(0, 0, 500, 500);
ctx.beginPath();
ctx.moveTo(mouse.x-100, mouse.y);
ctx.lineTo(mouse.x, mouse.y+100);
ctx.lineTo(mouse.x+100, mouse.y);
ctx.lineWidth = 5;
ctx.strokeStyle = "Black";
ctx.stroke();
ctx.closePath();
}

// Get Current Mouse Position
function getCursorPosition(e) {
    var x, y;
    if (e.layerX || e.layerY) {
        x = e.layerX;
        y = e.layerY;
    }
    else {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }               
    return {x:x, y:y};
    }
window.onload = viewDidLoad;

固定在鼠标后面的两条线之间的角度

3 个答案: