1

いくつかの計算から収集された情報を取得してキャンバス グラフにプロットするプログラムを作成しようとしています。ただし、より大きな数に対応できるように、グラフをスケーリングする必要があります。ctx.scale();しかし、キャンバスのブランク全体を出すたびに！最初にキャンバスを拡大縮小することでこれを停止できると思ったのですが、拡大後にキャンバスに何も描画されません。

私のキャンバスのコーディングは次のとおりです。

var c=document.getElementById("graph_");
        var ctx=c.getContext("2d");
        graph_.style.backgroundColor="white";
        var z0=Math.max(Math.abs(a),Math.abs(b));
        var z=Math.round(z0);           
        var z1=Math.round(z);
        var z2=z*2
        // alert(z1);   
        // alert(z2);

        ctx.scale(3200/z,3200/z)    

        var xnew=360/2+360/2*a
        var ynew=360/2-360/2*b
        alert(xnew);    
        alert(ynew);

        ctx.font = '10px Calibri';
        ctx.fillText("( 0 , 0 )", 125, 85);
        ctx.fillText(z1, 210, 87);
        ctx.fillText(z2, 270, 87);

        ctx.fillText(z1*-1, 75, 87);
        ctx.fillText(z2*-1, 0, 87);

        ctx.fillText(z1, 120, 43.5);
        ctx.fillText(z2, 120, 10);

        ctx.fillText(z1*-1, 120, 120);
        ctx.fillText(z2*-1, 120, 145);

        ctx.lineWidth = 1;
        ctx.beginPath()
        ctx.moveTo(150, 0);
        ctx.lineTo(150, 400);
        ctx.closePath();

        ctx.lineWidth = .2;
        ctx.moveTo(0, 75);
        ctx.lineTo(400, 75);
        ctx.strokeStyle = "#8B8682";
        ctx.stroke();
        ctx.closePath();

          ctx.beginPath();
          ctx.lineWidth = 2;
          ctx.moveTo(xnew, 180);
          ctx.lineTo(180, ynew);
          ctx.strokeStyle = "red";
          ctx.stroke();

4

2 に答える 2

1

実際には、ものはキャンバスに描画されています。描画のデフォルトの原点が左上にあるため、ズームインしすぎてグラフの左上隅にあるため、表示できません。 0,0。

したがって、ここまでズームインしたい場合（おそらくズームアウトしてより大きな数値、つまりグラフ上のより大きな図面を表示したい場合でも）、キャンバスの原点を新しい原点（左上にあるもの）に変換する必要があります。コンテキストをスケーリングする前に）を確認してください。

次のような翻訳方法を使用できます

ctx.translate(newX,newY);

ただし、その前に、コンテキストの状態を保存して、元に戻すことができるようにします。

グラフの中央を拡大したいとします。これは、次のポイントに変換されます。

ctx.translate((-c.width /2 * scale) + offsetX,(-c.height / 2 * scale) + offsetY);

ここで、offsetXはキャンバスの幅/ 2、offsetYはキャンバスの高さ/ 2であり、スケールはctx.scale呼び出しでスケーリングしている量によるものです。

于 2012-06-07T17:42:56.950 に答える
0

正確には、の値は何3200/zですか？

キャンバスを非常に大きく拡大しているので、画面に表示されるのはキャンバスの最初の数ピクセルだけだと思います。画面の左上の5ピクセルには何も描画しないため、何も表示されません。

于 2012-06-07T14:45:06.897 に答える