Fabric.js 示例：与画布外的对象交互

现在的网页，很少再使用传统的模式开发了，一般都是使用 Vue 等前端框架开发，提高了开发速度，但是如何与 Fabric.js​ 如何交互和操作是个问题，下面是一个简单的示例：

<template>
  <div class="groups">
    <canvas id="canvas"></canvas>
    <button ref="btn">button</button>
  </div>
</template>
<script>
import { fabric } from "fabric";
export default {
  data() {
    return {
      canvas: "",
    };
  },
  mounted() {
    var canvas = this.canvas = new fabric.Canvas("canvas", {
      width: 400,
      height: 400,
      backgroundColor: "#ddd",
    });
    fabric.Object.prototype.originX = "center";
    fabric.Object.prototype.originY= "center";
    fabric.Canvas.prototype.getAbsoluteCoords = function(object){
      console.log(this);
      console.log(object);
        return {
            left:object.left+this._offset.left,
            top:object.top+this._offset.top
        };
    }
    var btn = this.$refs.btn,
    btnWidth = 85,
    btnHeight = 18;
    function positionBtn(obj){
        var absCoords = canvas.getAbsoluteCoords(obj);
        btn.style.left = (absCoords.left - btnWidth/2)+'px';
        btn.style.top = (absCoords.top - btnHeight/2)+'px';
    }
    fabric.Image.fromURL("8972bd40735fa8d2f0c739e510fb30e240818.jpeg",function(img){
        canvas.add(img.set({left:250,top:250,angle:30}).scale(0.25));
        img.on("moving",()=>positionBtn(img));
        img.on("scaling",()=>positionBtn(img));
        positionBtn(img);
    })
  },
};
</script>
<style>
button{
  position: absolute;
}
</style>