web-dev-qa-db-ja.com

ブラウザでの複数のキャンバス-続行するには？

これは私が何年も前にJavaアプレットとして書いたものです。JavaScriptに変換してブラウザのhtml5キャンバスで実行したいと思います。私が見る限り、ここではキャンバスが最も理にかなっています。（SVG/DIVテクニックは、私がやりたいことに対してそれほど友好的ではありません。）キャンバスでは、マウスのドラッグと視覚的な更新が可能です。これは、表示された概念を理解するために必要なものです。

four Java applets

実際には、これは4つの別個のアプレットです。これは、キャンバスに完全に変換されません。このJavaScript/Canvasを更新する最善の方法がわかりません。私には3つの選択肢があると思います。

  • 4分の1に分割された1つの大きなキャンバス。 （ここでの問題は、コントロール要素をつかんでドラッグするときに、ドラッグが隣接するテクニックに当たるのを止めるものが何もないことです。内部境界をプログラムすることはできますが、その面白さはどこにありますか？これは私の最も嫌いなオプションです。）
  • 4つの個別のキャンバス（スペル？）。それぞれに独自の#idがあります。
  • 4つのiframe。それぞれのキャンバスは、独自のhtmlファイルでスタンドアロンとして使用されます。これらはすべて同じサーバーでホストされます。

4つの機能的なグラフィックボックスを表示するための最適な手法について誰かが意見を述べた（そしてその理由は？）.

javascripthtml5canvas
1
zipzit

4つのキャンバス要素が最適だと思います。これにより、それぞれに独自のコンテキストが与えられ、マウスイベントにさらに簡単に応答できるようになります。さらに、描画の観点からは、クリッピングについて心配する必要はありません。ここではiframeは完全に不要です。

ちなみに、Fabric.jsのようなCanvasベースのライブラリを調べると、グラフィックとのやり取りが簡単になる場合があります。

3
GrandmasterB

どうしても、最善の解決策は、各ペインにキャンバスを使用することです。

あなたはあなたのコメントの1つに注意しました：

Iframeを使用すると、コーディングの作業負荷が大幅に軽減されます。 4つの異なるコンテキストを管理する必要はありません。実際、フラグ要素（flag = ellipseまたはbezierまたはbsplineまたはnurb）を使用して、ボックスをすべて同じ方法でコーディングできます（これが元のアプレットのコーディング方法です...）

しかし、iframeを使用すると、コーディングが特にどのように減少するかはわかりません。 iframeを使用した場合、最終的にはより多くのコーディングを行う可能性が高く、iframeが原因で問題が発生する可能性があります。

問題の解決にアプローチする方法は次のとおりです。コードはそれ自体を物語っています。

/**
 * Pane object is a map from ID to options specific to a pane.
 * The id will be used for each canvas element, and the options will determine
 * what will be drawn on a canvas.
 * @type object
 */
var pane = {
    "ellipse": {
        label: "Simple Straight Line & Ellipse Technique",
        degree: null,
        buttons: [{
                label: "Information",
                execute: function () {
                    // implementation of what happens when the 'Information'
                    // button on the ellipse canvas is clicked.
                }
            },
            {
                label: "Reset Frame",
                execute: function () {
                    // implementation of what happens when the 'Reset Frame'
                    // button on the ellipse canvas is clicked.
                }
            }]
    },
    "beizer": {
        label: "Beizer Technique",
        degree: null,
        buttons: [/* You have a pattern to follow above */]
    },
    "b-spine": {
        label: "B-Spine Technique with ...",
        degree: 3,
        buttons: [/* You have a pattern to follow above */]
    },
    "nurbs": {
        label: "NURBS with uniform ...",
        degree: 3,
        buttons: [/* You have a pattern to follow above */]
    }
};

// Extract the IDs for each canvas, and call `draw` for each one of them.
Object.keys(pane).forEach(draw);

/**
 * Draws on the canvas with the given id.
 * @param {string} id ID of a canvas element
 * @returns {undefined}
 */
function draw(id) {
    var option, canvas, context;

    option = pane[id];
    canvas = document.getElementById(id);

    // Now you are ready to implement your drawing,
    context = canvas.getContext("2d");
    // if you wanted the label you can have it from `option.label`.
    // The rest is up to your imagination...
}

各ペインに関連付けられているオプションに基づいて、特別な描画ロジックに分岐できます。

1
Igwe Kalu

痛い。以前に言及されていない（または最初の投稿時に理解されていた）重大な問題のために、4つのiframeを使用する方がはるかに簡単であることが判明しました。

表示の大部分はすべてに共通であり、4回再作成する必要があることに注意してください。

問題の問題は、キャンバスを上書きするヘルプ指向のテキスト画面でした。私が見ることができるものから、キャンバスとテキストdivは時間内に同じスペースを占めることができません。なんらかの理由で、Canvas要素は常に背景画像などを含むdivを通じてブリードします...結局、jQueryを使用してさまざまな要素を表示および非表示にしました。オーバーラップを合計すると、1ページの4つのキャンバス要素が醜くなります。

さらに、CSSと複数のcanvas要素を使用していたこともありました。固定サイズの画面、フローティング要素などがある場合は問題ありません。私はiframeが「悪い」ことを知っています。

iframeを使用すると、作業が簡単になります。

    <div class="container">
        <iframe src="./bezier_curve.html?lineType=Simple"></iframe>
        <iframe src="./bezier_curve.html?lineType=Bezier"></iframe>
    </div>
    <div style="clear: both;"></div>
    <div class="container">
        <iframe src="./bezier_curve.html?lineType=BSpline"></iframe>
        <iframe src="./bezier_curve.html?lineType=NURB"></iframe>
    </div>
    <div style="clear: both;"></div>

ref： RLパラメータを渡す方法...

0
zipzit