0

学校のコースの一環として、HTML5のCanvas要素の操作方法を学習しています。これは、Javascriptの操作方法も学習していることを意味します。課題は、何かのグラフィックと、この何かのグラフィックとのある種の相互作用を作成することです。

いくつかの簡単な図を作成し、ユーザーが値を入力して図の変化を確認できるようにすることにしました。

http://people.dsv.su.se/~tojo0551/graf/lines.htmlには、私が作成したいくつかの図が含まれていますが、Javascriptを使用して相互作用を作成するというトリッキーな部分があります。これはおそらく簡単ですが、JQuery以外のJavascriptに触れたことはありませんでした。そのため、少し途方に暮れていました。

ユーザーが下部の棒グラフを操作し、1〜5の値を入力して、それに応じて棒を大きくできるようにしたいとします。

Canvasコードは単純で、次のようになります。

function bars(){

var canvas = document.getElementById("bars");
if (canvas.getContext)
{   

var ctx = canvas.getContext("2d");

var bar1 = canvas.getContext("2d");
bar1.fillStyle = "rgba(0, 50, 0, .2)";
bar1.fillRect(20, 400, 30, 90);

var bar2 = canvas.getContext("2d");
bar2.fillStyle = "rgba(0, 50, 0, .4)";
bar2.fillRect(55, 360, 30, 130);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(90, 260, 30, 230);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(125, 290, 30, 200);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(160, 270, 30, 220);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(195, 250, 30, 240);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(230, 300, 30, 190);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(20, 400, 30, 90);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(55, 360, 30, 130);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(90, 260, 30, 230);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(125, 290, 30, 200);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(160, 270, 30, 220);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(195, 250, 30, 240);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(230, 300, 30, 190);

しかし、私はここからどこへ行くのですか？私はプログラミングに不慣れで、関数を作成し、選択とループを使用してフローを制御する方法を知っています。私は初心者プログラマーです。ユーザーコントロールを作成するための自然な道は何ですか？間違った方向に作業しないように、作業を開始する前に入力が必要です。方法やあなたが得たアイデアについての良いアドバイスがあるページは大歓迎です。/トーマス

4

2 に答える 2

0

これは非常に簡単です。jQueryの経験がある場合は、ここに含めることをお勧めします。これにより、作業が簡単になります。

jQueryを使用していると仮定すると、ユーザーがhtml入力の値を変更するたびにbars（）関数を呼び出す必要があります。まず、bars（）宣言を変更して、値を指定して呼び出すことができるようにします。このような：

function bars(userVal) {
    // All your existing code ...
}

次に、bars（）が最後に呼び出されたときに描画されたものをすべてクリアする必要があります。何かのようなもの：

function bars(userVal) {
    var canvas = document.getElementById("bars");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        // Clear the bars that were drawn last time
        ctx.clearRect(x,y,w,h);
        // The rest of your existing code ...
    }
}

clearRectは、原点の位置（xとy）と高さと幅（wとh）を取り、その領域のキャンバスをクリアします。したがって、描画領域の必要な制限を渡します。

次に、ページにテキスト入力を追加し、変更されるたびにjQueryを使用してbars（）を呼び出します

$(document).ready(function() {
    $("input").on("change", function() {
        var value = $(this).val();
        bars(value);
    });
});

最後に、ユーザーが入力した値をどのように処理するかを決定する必要があります。これは完全にあなた次第ですが、それが機能することを確認するための迅速で簡単なテストは、描画呼び出しの1つで数値を使用することだけだと思います。

例：

// This would change the start position of a bar
ctx.fillRect(userVal, 260, 30, 230);
// This would change the width of a bar
ctx.fillRect(90, 260, userVal, 230);
// This would change the colour of a bar
ctx.fillStyle = "rgba(userVal, 50, 0, .4)";

楽しむ。

于 2012-04-10T13:17:00.667 に答える
0

fabricjsを見てください。キャンバスを使用して比較的単純なことを行うのは非常に複雑になり始めます。これにより、インタラクションもサポートされますが、一般的には生活が楽になるようです。基本を知ることは重要ですが、大工道具なしで家を建てようとしないでください。

プロットがもっと興味のあるものである場合は、 flotを確認する必要があります。

それから私たちの間で冒険的な人のために、3dをプロットする3つがあります。あなたはそれに取り組むべきですが。

于 2012-04-10T12:59:45.473 に答える