Question

我在画布上以坐标X，Y绘制了一个文本并保存了它们。我有一个简单的方法，检查文本边界内是否发生鼠标单击。问题是当我旋转文本时45度我无法检查旋转文本中是否发生了鼠标点击。

简而言之，如何检查鼠标是否在旋转的文本或形状内？

Answer 1

创建一个以与文本相同的角度旋转但不绘制的矩形对象。

然后使用：

// set transforms here.
// add rect representing text region:
ctx.beginPath();
ctx.rect(x, y, w, h);  // region for text
if (ctx.isPointInPath(mx, my)) {
    // we clicked inside the region
}
ctx.setTransform(1,0,0,1,0,0);  // reset transforms after test

<强>演示：

＆＃13;

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    txt = "ROTATED TEXT", tw, region;

// transform and draw some rotated text:
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "32px sans-serif";
ctx.translate(150, 75);
ctx.rotate(0.33);
ctx.translate(-150, -75);
ctx.fillText(txt, 150, 75);
tw = ctx.measureText(txt).width;

// define a region for text:
region = {x: 150 - tw*0.5, y: 75 - 16, w: tw, h:32}; // approx. text region

// function to check if mouse x/y is inside (transformed) region
function isInText(region, x, y) {
  ctx.beginPath();
  ctx.rect(region.x, region.y, region.w, region.h);
  return ctx.isPointInPath(x, y);
}

// test for demo
canvas.onmousemove = function(e) {
  var rect = canvas.getBoundingClientRect(),
      x = e.clientX - rect.left,
      y = e.clientY - rect.top;
  
  // just to visualize:
  ctx.clearRect(0,0,300,150);
  ctx.fillStyle = isInText(region, x, y) ? "red" : "black";
  ctx.fillText(txt, 150, 75);
};

＆＃13;

<canvas></canvas>

＆＃13;

Answer 2

请勿直接使用以下代码。在这里，我试图仅解释您如何处理此类问题的逻辑。您可能必须根据您的问题编写代码，或将此解决方案扩展为适合您的问题

这是更多的数学问题，您必须找到一个点是否在旋转的矩形内部（与@ user1693593所说的一样）您可以找到一个覆盖文本的矩形（rect（x1：text.x1，y1：text.y1，x2：text.x2，y2：text.y2）假设（text.x1，text.y1）表示左上文字的一角。现在将rect绕其中心旋转theta角度，找出x1，y1，x2，y2：

假设所有角度计算将以+ ve个角度进行。

if theta < 0 then theta = (360 - abs(theta))

现在计算中心点与点（x2，y2）之间的角度（从中心到rect的任意角的角度将相同，我们正在计算（x2，y2），因为它将给我们正角）

var width = (x2-x1);
var height = (y2-y1)
var hypotenuse = Math.pow(width*width + height*height, 0.5);
var innerAngle = Math.acos(x2 - x2 / hypotenuse);

现在计算与中心点的最终角

(x1, y1), angle((Math.PI + baseAngle) + angle) %(Math.PI*2)
(x2, y1), angle((Math.PI*2) - baseAngle + angle) % (Math.PI*2)}
(x1, y2), angle((Math.PI - baseAngle) + angle) % (Math.PI*2)}
(x2, y2), angle(baseAngle + angle) % (Math.PI*2)}

现在找出矩形的旋转点：

point.x = centre.x + (hypotenuse * Math.cos(point.angle));
point.y = centre.y + (hypotenuse * Math.sin(point.angle));

旋转点之后，可能会更改其顺序，以确保正确的顺序基于x轴对它们进行排序，如果两个点具有相同的x轴，则根据y轴对它们进行排序（使用任何排序）现在我们得到了排序点。根据其位置p0，p1，p2，p3对其命名从这些点找到旋转矩形的新边界，在x方向和y方向上找到边界：

var boundary_x1 = ( (p1.x - p0.x) / (p1.y - p0.y) ) * (mousePos.y - p0.y) + p0.x;
var boundary_x2 = ( (p3.x - p2.x) / (p3.y - p2.y) ) * (mousePos.y - p2.y) + p2.x;
var boundary_y1 = ( (p2.y - p0.y) / (p2.x - p0.x)) * (mousePos.x - p0.x) + p0.y;
var boundary_y2 = ( (p3.y - p1.y) / (p3.x - p1.x)) * (mousePos.x - p1.x) + p1.y;

在获得沿x和y方向的边界点后，我们可以轻松地放置中点条件，并可以找到是否在rect中单击了一个点（鼠标点）：

var clickedInside = (mousePos.x > boundary_x1 && mousePos.x < boundary_x2) && (mousePos.y > boundary_y1 && mousePos.y < boundary_y2);

如果clickedInside为true，则在rect内部发生了鼠标单击

如何检查JavaScript中的HTML5 Canvas上的旋转文本内是否有鼠标单击？

2 个答案: