我正在尝试使用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
部分,则会显示圆圈。