如何检查鼠标单击是否在JavaScript中HTML5画布上的旋转文本内？ [英] How do I check if a mouse click is inside a rotated text on the HTML5 Canvas in JavaScript?

问题描述

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

I have drawn a text on the canvas in coordinates X, Y and saved them. I have a simple method that checks if a mouse click has happened inside the text boundaries. The problem is when I rotate the text 45 Degree I cannot check whether a mouse click has happened within the rotated text or not.

简而言之，如何检查

推荐答案

创建一个以与文本相同的角度旋转的矩形对象，

Create a rect object which is rotated at the same angle as the text, but not drawn.

然后使用：

// 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

Demo：

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

<canvas></canvas>

这篇关于如何检查鼠标单击是否在JavaScript中HTML5画布上的旋转文本内？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！