2

画像の動的ロード:

imageObj.src = "source";

ボタンクリックコード:

$(document).ready(function ()
        {
            var value = 0;
            $('#left').click(function ()
            {
                alert("left click");
                value -= 90;
                $('#img').rotate({ animateTo: value });

            });
            $('#right').click(function ()
            {
                value += 90;
                $('#img').rotate({ animateTo: value });
            });
        });

キャンバス ボタンのクリックで画像を動的にロードしましたが、キャンバス内の画像を時計回りと反時計回りに回転させる必要があります。

HTML でハードコードされた img タグを使用すると機能しますが、画像が動的に読み込まれると機能が機能しません。

4

1 に答える 1

1

Bergi が述べたように、仮想的に回転していて、キャンバスには何も描画されていません。これが私があなたのために用意した実用的な例です:

http://jsfiddle.net/gurkavcu/J9B3k/

次のように画像オブジェクトを回転できます。

 $('#left').click(function() {

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.translate((imageObj.width / 2), (imageObj.height /2));
        context.rotate(-90 * Math.PI / 180);
        context.translate(-(imageObj.width / 2), -(imageObj.height / 2));
        context.drawImage(imageObj, 0, 0, imageObj.width , imageObj.height);


    });
    $('#right').click(function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.translate((imageObj.width / 2 ), (imageObj.height / 2));
        context.rotate(90 * Math.PI / 180);
        context.translate(-(imageObj.width / 2), -(imageObj.height / 2));
        context.drawImage(imageObj, 0, 0, imageObj.width , imageObj.height);
    });
于 2012-07-16T14:41:34.400 に答える