Ionic中的PinchZoomCanvas不允许在Canvas上绘制

时间:2018-06-22 00:46:05

标签: canvas ionic3 pinchzoom

我正在尝试使用Ionic 3构建应用程序。此应用程序的页面显示图片。通过脚本PinchZoomCanvas可以缩放此图片。这部分工作正常。

这是我的代码:

var pinchZoom = new PinchZoomCanvas({
  canvas: document.getElementById('myCanvas'),
  path: this.floorPlanURL,
  momentum: false,
  zoomMax: 2,
  doubletap: true
});

我需要在此页面上实现一项功能,该功能在图像的点击/点击区域上绘制一个圆圈。

如果不使用具有以下功能的PinchZoomCanvas脚本,则可以在画布上创建圆而不会出现问题:

handleStart(ev) {
    let ctx = this.canvasElement.getContext('2d');
    let x = ev.clientX;
    let y = ev.clientY;
    console.log(x, y);

    ctx.clearRect(0, 0, 300, 200);
    let img = document.getElementById("floorPlan");
    ctx.drawImage(img, 0, 0, 300, 200);

    ctx.strokeStyle = "#FF0000";

    ctx.beginPath();
    ctx.arc(x, y, 5, 0, 2 * Math.PI);
    ctx.stroke();
}

我可以告诉您控制台日志的输出已正确调用了该函数。但圆圈未在图像上绘制。如果我省略了代码的var pinchZoom部分,则会显示圆圈。

0 个答案:

没有答案