0

ボタンをクリックして画像を変更しています。画像が変更されていることを src コードで確認できますが、実際の画像はブラウザーで変更されていません。どうしてですか、そしてそれを解決する方法は？

// AvatarGenerator.eyes = 1;

moveRightBtn.on('click', function(){
    var newImage = 'eyes' + (AvatarGenerator.eyes + 1) + '.png';

    $('#eyesImg').attr('src','img/' + newImage);
});

編集: 実際に動作する jsFiddle を作成しましたが、fabric.js (キャンバス フレームワーク) を使用しているため、理解できないとはいえ、動作していない可能性があります。:(

4

1 に答える 1

2

あなたの fabric.js コード:

var canvas = new fabric.Canvas('canvas');

var imgInstance = new fabric.Image(imgElement, {
    left: 100,
    top: 100,
    angle: 30,
    opacity: 0.85
});

canvas.add(imgInstance);

イメージのビジュアル コピーをキャンバスに「スタンプ」します。キャンバスは単なるピクセルのグリッドであるため、キャンバスは元の画像要素のいかなる種類の参照も保持しません。キャンバスは、それが何を表しているかについて何も知りません。キャンバスはピクセル データを保持するだけです。

したがって、「スタンプ」に使用された元の画像要素が変更されても、キャンバス上の「インプリント」ピクセルが変更される理由はありません。代わりに、fabric.js コードを再実行して新しいピクセルをキャンバスにスタンプする必要があります。

于 2013-05-02T17:12:26.080 に答える