CODEWITHSUNDEEP
javascriptkineticjs
hsgu
hsgu

Reputation: 864

Proper way to crop image in KineticJS

I try to crop image with this way

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

and it doesn't work see in http://jsfiddle.net/cm5jj/

and then I try to fill rect with image

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  
        },   
    }
});

and still doesn't work http://jsfiddle.net/cm5jj/1/ please help.
thank so much.

Upvotes: 1

Views: 781

Answers (2)

Xiangkun
Xiangkun

Reputation: 1127

In your first code snippet, you mistyped height with heigth. Maybe spell check will help with this.

As to your second code snippet, to fill a rect with an image, you need fillPatternImage property, which requires an image object, and fill is used to fill with color.

fill example:

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

fillPatternImage example:

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';

Upvotes: 0

Eric Rowell
Eric Rowell

Reputation: 5219

I believe the problem is that you're cropping the image to the exact dimensions of the image size, which means that you aren't cropping at all. try setting width and height to values greater than the crop width and height values.

Also, if you're wanting to animate the sprite, you should be using Kinetic.Sprite() instead

Upvotes: 1

Related Questions