2

jQueryの resizable() 関数でサイズを変更するときに、キャンバスを含むdivにビジュアルコントローラーを提供したいと思います。

「ビジュアル コントローラー」とは、画像をクリックすると表示される 8 つの黒い四角形のことで、この例のように画像のサイズを変更できます。

ビジュアル コントローラを含む画像

div の周りに 8 つの正方形を描画する次の関数を作成しました。div をクリックすると、目的の視覚的外観が得られます。div をもう一度クリックすると、8 の二乗が削除され、resizable() 関数が削除されます。正常に動作しますが、div のサイズを変更してもう一度クリックして 8 つの正方形を削除しても、それらは削除されません。

図面を適用する前にクリックする前にキャンバスの状態を保存し、キャンバスを再度クリックしたときに復元する必要があります。

$(document).on("click", "canvas", function(eg) {
    var thisCanvas = $(this).attr("id");
    var theCanvas = document.getElementById(thisCanvas);
    var ctx = theCanvas.getContext("2d");
    canvasSelected(thisCanvas, ctx);
});

ユーザーがキャンバスをクリックすると、次の関数が起動します。

function canvasSelected(theCanvas, ctx){
    var ctxWidth = $("#"+theCanvas).width();
    var ctxHeight = $("#"+theCanvas).height();
    if($("#"+theCanvas).hasClass("bordering")){
        ctx.restore();
        $("#"+theCanvas).addClass("defaultBorder");
        $("#"+theCanvas).removeClass("bordering");
        ctx.beginPath();
        ctx.clearRect(0,0,6,6);
        ctx.clearRect(ctxWidth- 6,0,6,6);
        ctx.clearRect(ctxWidth/2,0,6,6);
        ctx.clearRect(0,ctxHeight- 6,6,6);
        ctx.clearRect(ctxWidth- 6,ctxHeight- 6,6,6);
        ctx.clearRect(ctxWidth/2,ctxHeight- 6,6,6);
        ctx.clearRect(0,ctxHeight/2,6,6);
        ctx.clearRect(ctxWidth- 6,ctxHeight/2,6,6);
        $("#"+theCanvas).resizable("option", "disabled", true);
    }else{
        ctx.save();
        $("#"+theCanvas).removeClass("defaultBorder");
        $("#"+theCanvas).addClass("bordering");

        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.fillRect(0,0,6,6);
        ctx.fill();
        ctx.fillRect(ctxWidth- 6,0,6,6);
        ctx.fill();
        ctx.fillRect(ctxWidth/2,0,6,6);
        ctx.fill();
        // bottom rects..
        ctx.fillRect(0,ctxHeight- 6,6,6);
        ctx.fill();
        ctx.fillRect(ctxWidth- 6,ctxHeight- 6,6,6);
        ctx.fill();
        ctx.fillRect(ctxWidth/2,ctxHeight- 6,6,6);
        ctx.fill();
        // middle rects
        ctx.fillRect(0,ctxHeight/2,6,6);
        ctx.fill();
        ctx.fillRect(ctxWidth- 6,ctxHeight/2,6,6);
        ctx.fill();
        $("#"+theCanvas).resizable();
        $("#"+theCanvas).resizable("option", "disabled", false);
    }
}

ここにjsfiddleがあります

4

1 に答える 1

3

あなたの問題は、 を介してキャンバスのサイズを変更する方法resize()です。キャンバスのサイズは変更されていますが、座標系のサイズは変更されません。初期の幅と高さ 550x350 は変わりません。

ライブデモ

私がしたことは、あなたのcanvasSelectedイベントに以下を追加することだけでした.

// get the canvas element
var canvas = document.getElementById(theCanvas);
// change the pixel dimensions to match the css width and height.
canvas.width = ctxWidth;
canvas.height = ctxHeight;

これにより、ピクセル寸法も更新されます。CSS を使用してキャンバス要素のサイズを変更することは、予期しない結果になるため、通常は悪い考えであることを覚えておいてください。

ただし、上記の場合、グラフィックを再描画する必要があります。したがって、別の方法は、キャンバスの元の幅と高さを追跡し、次のフィドルのようにそれらの値を使用することです。

ライブデモ 2

この例では、高さと幅が常に参照されるようにグローバルに作成しましたが、提供されているデモを使用して、要素の元の高さと幅を追跡するより良い方法を考え出すことができると思います。

また、jQuery のwidth()andは、canvas 要素でのand の呼び出しとheight()同じではないことに注意してください。jQuery のメソッドは、スタイル プロパティを使用して要素のサイズを変更します。widthheight

于 2013-03-09T03:55:33.617 に答える