2013-10-19 6 views
5

HTML5キャンバスを使用しているときに、特定のパスをjavascript変数/配列に保存して後で操作するにはどうすればよいですか?ここまで私がこれまで行ってきたことは次のとおりです。HTML5キャンバス:個々のパスを操作する

    ctx.beginPath(); 
         ctx.moveTo(lastX,lastY); 
         ctx.lineTo(x,y); 
         ctx.lineWidth = s*2; 
         ctx.stroke(); 
        ctx.closePath(); 

私が必要とするのは、時にはこのパスを配列に格納できることです。次に、後でアレイのすべてのパスの色を変更する必要があります。 (これを行う方法もわかりません)

+0

は多分機能でそれらのアクションを保存しますか?だからあなたは一連の機能を持っています。 – Cristy

+0

この種の機能が必要なときはいつでも、SVGの使用を検討してください。 – slebetman

答えて

0

キャンバスでは、キャンバスビューを消去して再描画せずに変更することはできません。したがって、キャンバスを描画する関数を作成する必要があります。 配列に行の位置を格納します。関数内で配列をループして、これらを追加します。明らかに、いつでもキャンバスを再描画することができます。通常、イベントリスナーまたはタイミングイベントを設定します。

0

短い回答:できません。 Canvas2D APIの次の草稿(http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#path-objectsを参照)にありますが、まだサポートされていません。

長い答え:パスを表すオブジェクトを書き込んで、draw(canvas)という関数を与えて、選択した色と塗りつぶしのプロパティでキャンバス上に描画します。例えば:あなたはjavascriptオブジェクトへのパスを描画するのに必要なすべてのデータをシリアル化することができます

var Path = function() { 
    this.instructions = []; 
} 
Path.prototype = { 
    instructions: [], 
    moveTo: function(x,y) { 
    instructions.push({ 
     type: "moveTo", 
     arguments: [x,y] 
    }); 
    } 
    ... 
    draw: function(canvas) { 
    var ctx = canvas.getContext("2d"); 
    ctx.beginPath(); 
    this.instructions.forEach(function(i) { 
     ctx[i.type].apply(i.arguments); 
    }); 
    ctx.closePath(); 
    } 
} 
+0

それはうまくいく、どうすればそれについて正確に行くのだろうか?回答には –

+0

答えが編集されました。 –

+0

オブジェクト「Path」を将来のパス用に予約されているものとして呼び出すだけで十分注意してください。 – K3N

2

JavaScriptのオブジェクトを使用することの利点は、あなたが移動する必要がある場合は、さらにJSONにオブジェクトをシリアル化できることです別の場所へのパス(サーバーに戻るなど)

var path1={ 
    lineWidth:1, 
    stroke:"blue", 
    points:[{x:10,y:10},{x:100,y:50},{x:30,y:200}] 
}; 

次にあなたがパスの色を変更するには

function draw(path){ 

     // beginPath 
     ctx.beginPath(); 

     // move to the beginning point of this path 
     ctx.moveTo(path.points[0].x,path.points[0].y); 

     // draw lines to each point on the path 
     for(pt=1;pt<path.points.length;pt++){ 
      var point=path.points[pt]; 
      ctx.lineTo(point.x,point.y); 
     } 

     // set the path styles (color & linewidth) 
     ctx.strokeStyle=path.stroke; 
     ctx.lineWidth=path.lineWidth; 

     // stroke this path 
     ctx.stroke(); 
    } 

再描画/描画するそのパスをそのオブジェクトを使用することができ、あなただけのオブジェクトのストロークプロパティを変更し、(引き分けを呼び出す必要があります)再び:ここ

paths[0].stroke="orange"; 
    paths[1].stroke="green"; 
    draw(); 

は、コードとフィドルです:http://jsfiddle.net/m1erickson/McZrH/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    // get references to canvas and context 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    // serialize paths to a javascript objects 
    var path1={lineWidth:1, stroke:"blue", points:[]}; 
    var path2={lineWidth:4, stroke:"red", points:[]}; 

    // save the paths to an array 
    var paths=[]; 
    paths.push(path1); 
    paths.push(path2); 


    // build test path1 
    newPoint(25,25,path1); 
    newPoint(100,50,path1); 
    newPoint(50,75,path1); 
    newPoint(25,25,path1); 

    // build test path2 
    newPoint(200,100,path2); 
    newPoint(250,100,path2); 
    newPoint(250,200,path2); 
    newPoint(200,200,path2); 
    newPoint(200,100,path2); 

    // draw the paths defined in the paths array 
    draw(); 

    // add a new point to a path 
    function newPoint(x,y,path){ 
     path.points.push({x:x,y:y}); 
    } 


    function draw(){ 

     ctx.clearRect(0,0,canvas.width,canvas.height); 

     for(p=0;p<paths.length;p++){ 

      // get a path definition 
      var path=paths[p]; 

      // beginPath 
      ctx.beginPath(); 

      // move to the beginning point of this path 
      ctx.moveTo(path.points[0].x,path.points[0].y); 

      // draw lines to each point on the path 
      for(pt=1;pt<path.points.length;pt++){ 
       var point=path.points[pt]; 
       ctx.lineTo(point.x,point.y); 
      } 

      // set the path styles (color & linewidth) 
      ctx.strokeStyle=path.stroke; 
      ctx.lineWidth=path.lineWidth; 

      // stroke this path 
      ctx.stroke(); 

     } 

    } 

    // test 
    // change the stroke color on each path 
    $("#recolor").click(function(){ 
     paths[0].stroke="orange"; 
     paths[1].stroke="green"; 
     draw(); 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="recolor">Recolor</button><br> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html> 
2

新しいpath2Dオブジェクトでは今できるようです。

新しいPath2D API(Firefox 31以降から入手可能)を使用するとパスを保存でき、キャンバスの描画コードが簡単になり、実行速度が向上します。

new Path2D();  // empty path object 
new Path2D(path); // copy from another path 
new Path2D(d); // path from from SVG path data 

、構築するSVGパスデータを取り、特に便利である第三版、:コンストラクタはPath2Dオブジェクトを作成する3つの方法を提供します。あなたは今だけでなく、キャンバス上で直接同じ図形を描画するためにあなたのSVGパスを再使用することができます。

var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); 

情報はMozilla official siteから取られています。

+0

ありがとう、これはとてもうまくいきます! –

0

これは役立つかもしれない:

http://www.rgraph.net/blog/2015/september/svg-style-paths-for-canvas-with-the-rgraph-path-function.html

それはあなたが、この機能によって解釈され、アクションが実行された文字と数字で構成された文字列を、使用することを可能にする機能です。だから、あなたのパスはSVGパスのように文字列にすることができます。そして、データベースを渡したり格納したりするのがずっと簡単です。

だから四角形を描画するためのパスは次のようになります。

B rの意味赤

F 5 5 100 100:

b: beginPath() 
r: rect() 
f: fill() 
関連する問題