web-dev-qa-db-ja.com

サイズ変更可能なキャンバス（JQuery UI）

このページに従って、任意のDOM要素のサイズを変更できます。 http://jqueryui.com/demos/resizable/

ただし、これはCANVAS要素では機能しないようです。可能？

jquerycanvasresizable
23
Joubert Nel

Canvasには、次の2種類のサイズ変更動作があります。

  • キャンバスの新しい寸法に合わせてコンテンツが引き伸ばされる場所のサイズ変更
  • キャンバスが拡大または縮小する間、コンテンツが静的なままである場所のサイズ変更

これは、2種類の「サイズ変更」を示すページです。 http://xavi.co/static/so-resizable-canvas.html

最初のタイプのサイズ変更（コンテンツのストレッチ）が必要な場合は、キャンバスをコンテナーdivに配置し、CSSを使用してキャンバスのwidthとheightを100％に設定します。 。そのコードは次のようになります。

/* The CSS */
#stretch {
    height: 100px;
    width: 200px;
}

#stretch canvas {
    width: 100%;
    height: 100%;
}

<!-- The markup -->
<div id="stretch"><canvas></canvas></div>

// The JavaScript
$("#stretch").resizable();

2番目のタイプのサイズ変更（静的コンテンツ）は、2段階のプロセスです。まず、canvas要素のwidth属性とheight属性を調整する必要があります。残念ながら、これを行うとキャンバスがクリアされるため、すべてのコンテンツを再描画する必要があります。これを行うコードを次に示します。

/* The CSS */
#resize {
    height: 100px;
    width: 200px;
}

<!-- The markup -->
<div id="resize"><canvas></canvas></div>

// The JavaScript
$("#resize").resizable({ stop: function(event, ui) {
    $("canvas", this).each(function() { 
        $(this).attr({ width: ui.size.width, height: ui.size.height });

        // Adjusting the width or height attribute clears the canvas of
        // its contents, so you are forced to redraw.
        reDraw(this);
    });
} });

現在、上記のコードは、ユーザーがウィジェットのサイズ変更を停止すると、キャンバスのコンテンツを再描画します。 resize でキャンバスを再描画することは可能ですが、サイズ変更イベントはかなり頻繁に発生し、再描画はコストのかかる操作です-注意してアプローチしてください。

27
Xavi

これを使用することに関して、キャンバスの座標系には少し面白い癖があります：

#stretch canvas {
  width: 100%;
  height: 100%;
}

（上記の例から）

キャンバスの幅/高さ属性で％を指定できないため、これらのCSSルールを使用する必要があります。しかし、これらのルールだけを使用してオブジェクトを描画しようとすると、予期しない結果が生じることがわかります。描画されたオブジェクトは押しつぶされたように見えます。これが上記のCSSで、キャンバスの境界線があります...

    /* The CSS */
    #stretch {
        width: 200px;
        height: 100px;          
    }
    #stretch canvas {
        border:1px solid red;
        width: 100%;
        height: 100%;
    }

キャンバスは適切なサイズで描画され、境界線ルールが正しく実装されます。他の場所のコードで追加された青い長方形は、キャンバス全体に20pxのパディングを埋めるはずですが、これは発生していません。

using just 100% css rules

これを修正するには、alsoがcanvas要素の幅と高さを指定していることを確認してください（HTMLまたはsetAttributeを使用したJavaScriptで）。

canvas.setAttribute('width', '200');
canvas.setAttribute('height', '100');

または

<canvas width=200 height=100></canvas>

ページを更新すると、期待どおりの結果が得られます。

enter image description here

この「ダブルチェック」は、キャンバスが正しい座標系を使用して描画されていることを確認し、CSSルールを介してサイズを変更できるようにします。これがバグである場合、私はそれがやがて修正されると確信しています。

これは修正を提供することだけですが、詳細を読むことができます ここ

1
DigiWongaDude

さて、canvas要素の前にdivを適用し、その要素のサイズを変更してみませんか。停止したら、canvasに幅と高さを適用してから、canvasを再描画します。

0
Anna Kalampokeleurou