HTML画布setTranslate不适用于onClick

snvhrwxg 于 2023-03-21 发布在其他

关注(0)|答案(1)|浏览(147)

我有一个带有一些内容的HTML画布。这些内容需要被绘制转换到画布上。这是可行的。但是现在我需要检测哪个对象被点击了，所以我需要在对象的坐标中搜索以找到匹配的对象。但是由于对象是在不同的x，y位置绘制的，所以我不知道如何匹配它们。
我创造了这种情况。我想在点击时突出显示正确的对象。需要记住的一点是，这个画布是在一个环境中使用的（HMI屏幕与PLC连接），在那里我没有浏览器中通常可用的全部功能。这也意味着我在“onClick”功能上只得到x和y坐标。
https://jsfiddle.net/gkho89wd/
这段代码不是最干净的，但我用它来尝试一些事情。快速解释这段代码：
我有一个包含一些对象（框）的数组

const rawPositions = [];

每个位置都有一些属性，包括x和y，宽度和长度。2这些是用来在画布上画一些矩形的。3我还计算了“ratioX”和“ratioY”来缩放所有的东西。4这些x和y是用来实际绘图的。
在绘制矩形之前，我将执行“setTransform”以水平翻转画布：

ctx.setTransform(1, 0, 0, 1, 0, ctx.height);

如何将坐标从单击事件转换为“原始”坐标？

Html

来源：https://stackoverflow.com/questions/75753344/html-canvas-settranslate-does-not-work-with-onclick

1条答案

按热度按时间

7fyelxc51#

你可以更新findShape函数来考虑应用到画布的变换，你应该翻转y坐标，然后用它来搜索被点击的对象。

async function findShape(oX, oY) {
  console.log('findShape', oX, oY)

  // Flip the y coordinate back to match the transformed canvas
  const flippedY = ctx.height - oY;

  const clickedBox = placedCarton.findIndex(b => {
    return (b.ratioX <= oX) && (b.ratioX + b.width >= oX) &&
           (b.ratioY <= flippedY) && (b.ratioY + b.length >= flippedY);
  });

  moveArrows = [];
  positions = [];

  if (clickedBox >= 0) {
    placedCarton.forEach(b => b.active = false);
    placedCarton[clickedBox].active = true;
    activeBox = clickedBox;

    updateCartonCanvas();
    const box = placedCarton[clickedBox];

    await window.savePositions();

    const prePos = window.prePos;
    const postPos = window.postPos;

  } else {
    console.log('no box found');
  }
}

这个修改考虑到了画布垂直翻转的事实。通过翻转y坐标回来（使用ctx.height - oY），你现在可以正确地检测哪个对象被点击了。

赞(0）回复(0）举报 2023-03-21

我来回答

HTML画布setTranslate不适用于onClick

1条答案

相关问题

热门标签

最新问答