23

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

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

4

3 に答える 3

27

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

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

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

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

/* 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でキャンバスを再描画することは可能ですが、サイズ変更イベントはかなり頻繁に発生し、再描画はコストのかかる操作です - 注意してアプローチしてください。

于 2010-01-11T15:53:45.103 に答える
1

this の使用に関して、canvas 座標系にはちょっと変わった癖があります。

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

(上記の例から)

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

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

キャンバスは適切なサイズで描画され、ボーダー ルールは正しく実装されています。他の場所のコードに追加された青い四角形は、キャンバス全体を 20 ピクセルのパディングで埋めることになっていますが、これは実現していません。

100% CSS ルールのみを使用

これを修正するには、canvas 要素の幅と高さも指定してください (HTML または javascript で setAttribute を使用)。

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

また

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

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

ここに画像の説明を入力

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

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

于 2014-02-23T17:14:09.623 に答える
0

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

于 2013-01-17T18:48:18.797 に答える