2

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

这是一个示例图片。

您可以在上面看到我只是绘制的一个示例，以帮助自己告诉您我要实现的目标。我要做的是：画布上有一个给定的X，Y坐标，这个点是两条线的固定起点。两条线之间的角度应始终固定，例如：40°。这两条线应该跟随鼠标，它们之间有一个固定的角​​度。搜索该站点，我可以实现此功能的以下状态：根据本教程，我可以创建跟随鼠标的两条线，两条线的端点始终距离鼠标 100px，但是，当然，那不是' t 给我一个固定的角​​度，当我在画布上移动鼠标时，角度会发生变化。

这是我的 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零件存在的原因。

任何帮助将不胜感激，因为我自己无法解决这个问题。

4

3 回答 3

7

首先，得到想要的行长：

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
};

（jsfiddle.net 上的演示-您的小提琴已更新）

于 2012-08-04T19:19:22.040 回答
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;
于 2012-08-04T18:47:42.360 回答
0

这是你需要的吗？您可以在这里查看一个工作示例：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;
于 2012-08-04T17:20:34.410 回答