Question

我目前正在使用html5画布并在html的画布上使用ionic 2（tap）=“markPoint（$ event）”，我得到了tap事件的位置。下面是应该放置标记的功能：

public markPoint(event) {
    var position = event.center;
    let ctx = this.canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(position.x, position.y, 20, 0, 2 * Math.PI);
    ctx.fillStyle = '#00DD00';
    ctx.fill();
}

我正在设置画布，其中canvas是html中设置的id：

this.canvas = document.getElementById('canvas');

我没有看到这个代码的问题，但是我也不确定这是否是在离子2中的应用程序中制作标记的最佳方法。你知道这是否应该有效，如果不是为什么？此外，如果有更好的方法，那么关于它们将是非常棒的。

Answer 1

首先，我们必须制作更多的打字稿＆lt; 6＆gt;友好。仅仅使用id将canvas对象像另一个HTML元素一样是不够的。在这种情况下，我们应该帮助一点，所以我的第一个改变是：

this.canvas = document.getElementById('canvas');

FOR =＆gt;

this.canvas = <HTMLCanvasElement>document.getElementById('canvas');

然后你的功能看起来像这样：

public markPoint(event) {
    var position = event.center;
    let ctx: CanvasRenderingContext2D = this.canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(position.x, position.y, 20, 0, 2 * Math.PI);
    ctx.fillStyle = '#00DD00';
    ctx.fill();
}

希望得到这个帮助。

画布绘画是否适用于Ionic 2？

1 个答案:

画布绘画是​​否适用于Ionic 2？

1 个答案:

画布绘画是否适用于Ionic 2？