1

私は次のチュートリアルを使用して、ユーザーが画像の上に描画できるようにしています。

http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-simple

単純なデモだけで、ユーザーは私がやりたいことを実行できます。

次のタスクは、ユーザーが描画した領域の座標を取得して、データベースに保存することです。アプリケーションは理学療法士向けです。アイデアは、ユーザーが傷ついている体に描画し、その後、理学療法士が描画された画像で画像を表示できるようにすることです。

本当に2つの質問：

  1. 描画された画面の領域を取得するにはどうすればよいですか？
  2. データベースから取得したときに、どのように図形を画像に描画し直しますか？
4

1 に答える 1

0

チュートリアルには、clickX、clickYの2つの配列があります。mouseleaveとmouseupの後に、これらの配列からポイントを保存します。エリアになります。図形を描画するには、すべての領域をシリアル化して、クライアントで使用できるようにし、次のような再描画メソッドからのコードを使用してすべての領域を描画します。

for(var i=0; i < clickX.length; i++)
  {     
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }

私はあなたが正しいことを理解しましたか？

于 2012-07-19T07:22:30.900 に答える