javascript - 如何在 Fabric.js 中获取当前 View 的中心坐标?

标签 javascript canvas fabricjs

我正在开发一个图像加载系统,为了让它在移动设备上工作,我需要获取当前 View 的 Canvas 中心的坐标。 它应该返回与我将鼠标悬停在中心上相同的结果。

我尝试在 Fabric JS github 上询问,他们给了我这个: 但这个结果每次都给了我一半的 Canvas 高度和宽度。 谁能帮我理解为什么?

var myCenterCoordinates = fabric.util.transformPoint({
  x: canvas.width / 2,
  y: canvas.height / 2,
}, fabric.util.invertTransform(canvas.viewportTransform));

如果我将鼠标悬停在 Canvas 的正中心(我确实设置了鼠标位置),如果我调用 getcentercooperatives 函数,我应该会看到与(x 和 y)相同的结果

编辑: Fabric.util.invertTransform(canvas.viewportTransform)[4] 和 Fabric.util.invertTransform(canvas.viewportTransform)[5] 为您提供当前视点左上角的当前 x 和 y 坐标,因此我们也许能够用这个强文本做一些事情

最佳答案

我找到了答案:

var zoom=canvas.getZoom()
function CenterCoord(){
   return{
      x:fabric.util.invertTransform(canvas.viewportTransform)[4]+(canvas.width/zoom)/2,
      y:fabric.util.invertTransform(canvas.viewportTransform)[5]+(canvas.height/zoom)/2
   }
}

使用这个:

var centerX=CenterCoord().x
var centerY=CenterCoord().y

关于javascript - 如何在 Fabric.js 中获取当前 View 的中心坐标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58594222/

相关文章:

javascript - 我应该选择哪个 Canvas 框架,为什么?

javascript - 如何在 JavaScript for Canvas 中启用加速硬件

javascript - 在生产中使用 babel-node 可以吗

javascript - 从具有相同类的多个 div 元素中获取多个 .attr 值

javascript - 如何重现这种翻转效果

javascript - svg 加载到 Canvas 后获取单个对象

jquery - 如何使用 Fabric.js 在 Canvas 上画一条线

javascript - 在自定义元素中使用 Polymer Shadow dom 时出现问题

javascript - Canvas 游戏中圆圈边界的错误渲染

javascript - 如何使用 HTML 5 Canvas 和 Javascript 找到图像内的彩色标记?