1

この方法で画像を切り抜こうとします

var crop = new Kinetic.Image({ 
    image: img , 
    x: 100, y: 100, width: 100, heigth: 100, 
    crop : {
        x: 0, y: 0, width: 100, heigth: 100
    }
});

そしてそれは動作しませんhttp://jsfiddle.net/cm5jj/を参照してください

それから私は長方形を画像で埋めようとします

var rect = new Kinetic.Rect({  
    x: 100,  
    y: 100,  
    width: 100,  
    height: 100,  
    fill:{  
        image: img,  
        crop:{  
            x: 0,  
            y: 0,  
            width: 100,  
            height: 100  
        },   
    }
});

それでも機能しませんhttp://jsfiddle.net/cm5jj/1/ 助けてください。
ありがとうございます。

4

2 に答える 2

1

問題は、画像を画像サイズの正確な寸法にトリミングしていることです。つまり、まったくトリミングしていないということです。幅と高さをトリミングの幅と高さの値より大きい値に設定してみてください。

また、スプライトをアニメーション化する場合は、代わりに Kinetic.Sprite() を使用する必要があります

于 2013-03-20T01:59:52.863 に答える
0

最初のコード スニペットで、 とタイプミスheightしましheigthた。おそらくスペルチェックがこれに役立ちます。

2 番目のコード スニペットに関しては、四角形を画像で塗りつぶすにfillPatternImageは、画像オブジェクトを必要とfillし、色で塗りつぶすために使用されるプロパティが必要です。

fill例：

var rect = new Kinetic.Rect({  
    x: 100,  
    y: 100,  
    width: 100,  
    height: 100,  
    fill: 'blue'
});

fillPatternImage例：

var img = new Image();
img.onload = function() {
    var rect = new Kinetic.Rect({  
        x: 100,  
        y: 100,  
        width: 100,  
        height: 100,  
        fillPatternImage: img
    });
    // Add rect to your layer, and do drawing
};
img.src = 'http://cdn.sstatic.net/img/share-sprite-new.svg';
于 2015-09-16T15:24:47.560 に答える