イメージに描くHTMLキャンバスの中にロードされた画像

私はIonicアプリにHTMLキャンバスを持っています。イメージに描くHTMLキャンバスの中にロードされた画像

<canvas id="canvas" color="{{ color }}" width="800" height="600" style="position:relative;"></canvas>

このキャンバスでは、イメージをロードしています。以下はコントローラからのコードです

var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d'); 
     var img = new Image(); 
     img.src = $stateParams.imageId; 

     img.onload = function() { 
      context.drawImage(img, 0, 0, canvas.width, canvas.height); 
     }

イメージがロードされた後、ユーザーはイメージに書き込んで、イメージの特定の領域を丸で強調表示する必要があります。

HTMLキャンバスはデフォルトでこの機能を提供していませんか？今はイメージ上に何か注釈を付けることができません。どうすればこれを達成できますか？

出典

2016-09-07 kayasa

これは自分で実装する必要があります。

マウスのクリック/移動イベントにフックすることで実行できます。 2dのコンテキストを使用して、マウスの現在の位置に小さな四角形を描きます。ほとんどの場合、左のマウスボタンが動いています。

効果は、Windowsペイントペンシルツールに似ています。ここに簡単な例があります。

<html> 
 

 
<head> 
 
<style> 
 
\t canvas{ 
 
\t \t border: 1px solid black; 
 
\t } 
 
</style> 
 
</head> 
 
<body> 
 
<canvas id="myCanvas"></canvas> 
 

 
<script> 
 
\t var canvas = document.getElementById("myCanvas"); 
 
\t var ctx = canvas.getContext("2d"); 
 
\t 
 
\t var isMouseDown = false; 
 
\t 
 
\t canvas.onmousedown = function(e){ 
 
\t \t isMouseDown = true; 
 
\t } 
 
\t 
 
\t canvas.onmouseup = function(e){ 
 
\t \t isMouseDown = false; 
 
\t } 
 
\t 
 
\t canvas.onmousemove = function(e){ 
 
\t 
 
\t \t if(isMouseDown === false){ 
 
\t \t \t return; 
 
\t \t } 
 
\t 
 
\t \t var canvasPosition = canvas.getBoundingClientRect(); 
 
\t 
 
\t \t var x = e.clientX - canvasPosition.left; 
 
\t \t var y = e.clientY - canvasPosition.top; 
 
\t \t 
 
\t \t ctx.fillRect(x, y, 2, 2); 
 
\t }; 
 
</script> 
 
</body> 
 
</html>

出典

2016-09-07 17:39:56 Shadetheartist

アプリはiPhoneのようなデバイス上で動作しているとき、マウスクリックイベントは、イオンに働くだろう。 – kayasa

キャンバスタグで「autogram」という属性を使用すると、空白のキャンバスであれば、描画はデフォルトで機能します。しかし、キャンバスにイメージをロードすると、オートグラムは影響を受けません。 – kayasa

"autogram"はhtml5 canvas要素の一部ではありません。いくつかのライブラリを使用している場合は、あなたの質問で明らかにする必要があります。 – Shadetheartist

イメージに描くHTMLキャンバスの中にロードされた画像

答えて

関連する問題