7

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

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

今、私が必要としているのは、時々、このパスを配列に格納できるようにすることです。次に、後で戻って配列内のすべてのパスの色を変更できるようにする必要があります。（明らかに、これを行う方法もわかりません。）

4

5 に答える 5

2

パスを JavaScript オブジェクトに描画するために必要なすべてのデータをシリアル化できます。

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();
    }

パスの色を変更するには、オブジェクトのストローク プロパティを変更して、もう一度 draw() を呼び出すだけです。

    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>
于 2013-10-19T22:27:45.283 に答える
0

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

于 2013-10-19T21:34:13.130 に答える
0

簡単な答え: できません。これは Canvas2D API の次のドラフト ( http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#path-objectsを参照) にありますが、まだサポートされていません。

より長い答え: できませんが、パスを表すオブジェクトを記述draw(canvas)し、選択した色と塗りつぶしプロパティでキャンバスに描画されるように関数を与えることはできます。例えば：

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();
  } 
}
于 2013-10-19T21:34:22.890 に答える