画布和对象坐标

问题描述

我想知道是否有人可以提出第二种观点。我正在尝试获取在画布元素上显示的blob对象中心的坐标。

这里是HTML格式：

<template id="breath">
  <div id="page__home">
    <div id="canv_wrap" ref="canv_wrap" class="canv_wrap">
          <canvas
            id="canvas"
            ref="canvas"
            touch-action="none"
            @mouSEOver="mouseMove"
          ></canvas>
          <h1 class="instructions">{{ currentStep.text }}</h1>
        </div>

这是实例化Blob的方法：

[![methods: {
    init(canvas) {
      // create new blob
      this.blob = new Blob(this.color,canvas.getContext("2d"))
      // attach canvas element to Blob
      this.blob.canvas = canvas
      // set height to be same as width (square)
      this.blob.canvas.height = this.blob.canvas.width
      // set default color
      this.setColor(this.color)
      // initialise blob
      this.seTradius()
      this.blob.init()
      this.blob.render()
    },

半径

seTradius() {
      // set blob radius to canvas diameter / 2,minus padding space
      this.blob.radius = this.blob.canvas.width / 2 - this.padding
    },

最后，在下面定义了mouseMove事件（我不包括所有代码行，因为它是一个相当大的方法）

mouseMove(e) {
      let pos = this.blob.center

      // ------- Testing an alternative way to get center point --------- //
      let Box = document.querySelector("#canvas");
      let bounds = Box.getBoundingClientRect()
      let width = Box.offsetWidth;
      let height = Box.offsetHeight;
      //let pos = {  x: width / 2,y: height / 2 }
      // ----------------------------------------------------------------------------//



      let diff = { x: e.clientX - pos.x,y: e.clientY - pos.y }
      let @R_502_6422@tx = diff.x * diff.x
      let @R_502_6422@ty = diff.y * diff.y
      let @R_502_6422@t = Math.sqrt(@R_502_6422@tx + @R_502_6422@ty)
      let angle = null
      this.blob.mousePos = {
       x: pos.x - e.clientX,y: pos.y - e.clientY,}

我不确定我为什么this.blob.center返回 x：150， y：150

这将建议Blob对象位于屏幕的左上角。我包含了

的屏幕截图

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

coordinates html5-canvas