uniappH5手动拖拽缩放自定义绘制海报

对于canvas的手势操作行为目前依赖了js库--Hammer.js 1.定义要被操作的canvas盒子

    <div class="canvas" id="myElement">
      <canvas
        class="poster"
        canvas-id="firstCanvas"
        id="firstCanvas"
        @longtap="longpress"
        @touchstart="handleTouchStart"
        @touchend="endPress"
      >
      </canvas>
    </div>

2.需要注意的是 hammer.js要在onMounted钩子里面使用绑定好

onMounted(()=>{
    let that = this
     // Create an instance of Hammer with the reference.
    var square = document.getElementById("myElement");
    var hammer = new Hammer(square);
    hammer.get("pinch").set({ enable: true });//设置监听PINCH以后才会生效
    //缩放效果实际上是监听一次 缩放一个固定的大小 通过监听到缩放事件后 手动计算图片比例进行缩小或者放大即可
    //拖拽
    //计算拖动的位置方向 重绘即可
    hammer.on("panmove", function (e) {
      let { x, y } = e.center;
      that.movedX = x - that.beginX;
      that.movedY = y - that.beginY;
      that.dX = that.movedX + that.dX;
      that.dY = that.movedY + that.dY;
      that.beginX = x;
      that.beginY = y;
      that.context.drawImage(
        decodeURIComponent(that.$route.query.image),
        that.dX,
        that.dY,
        that.pinchImgWidth,
        that.pinchImgHeight
      );
      that.context.drawImage(
        decodeURIComponent(that.$route.query.poster),
        0,
        0,
        that.pageWidth * 0.672,
        that.pageWidth * 1.259
      );
        that.context.drawImage(
          that.imgData,
          that.pageWidth * 0.498,
          that.pageWidth * 1.103,
          that.pageWidth * 0.1,
          that.pageWidth * 0.1
        );
      that.context.draw();
    });
})