Develop Reference

KineticJS: How do I scale a Stage?

I have a KineticJS Stage with one layer. Here is a demo: http://jsfiddle.net/confile/7QTmz/
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function () {
var yoda = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118
});
// add the shape to the layer
layer.add(yoda);
// add the layer to the stage
stage.add(layer);
stage.size({
width: 100,
height: 200
});
layer.draw();
stage.draw();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
How can I resize the stage such that stage.toDataUrl() will return an image with the new dimensions?

You can 2X the stage and its content like this (also...thanks to #Greg for info on stage.size):
var scaleFactor=2;
stage.size({width:stage.width()*scaleFactor,height:stage.height()*scaleFactor});
stage.scaleX(scaleFactor);
stage.scaleY(scaleFactor);
stage.draw();

KineticJS fillPatternImage not working since version 5.0

Since I updated my KineticJS version to the latest (5.0.0) version filling a shape with a pattern image doesn't work anymore.
This is the code i am using to display the pattern:
var stage = new Kinetic.Stage({
container: document.getElementById("stage"),
height: 200,
width: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Rect({
x: 10,
y: 10,
width: 150,
height: 150,
fill: "red",
fillPriority: "pattern"
});
var image = new Image();
image.onload = function () {
shape.setFillPatternImage(image);
stage.draw();
};
image.src = "http://placekitten.com/50/50";
layer.add(shape);
stage.add(layer);
stage.draw();
See an example here: http://jsfiddle.net/ss3hF/
And a working example with old version: http://jsfiddle.net/ss3hF/1/
Does anyone else experience this?
Is it a bug or did i miss something in the ChangeLog?
Thanks in advance, McFarlane

Solution:
shape.setFillPatternImage(image);
shape.fillPatternScaleX(1);
shape.fillPatternScaleY(1);
stage.draw();

Events are lost after moving layer from within a "dragmove" callback

I have a scrollbar that moves a layer, so the layer is moved while in the scrollbar's "dragmove" callback. This causes all bound events to be disconnected on the moved layer!
Please see this fiddle: http://jsfiddle.net/NY4QK/10/
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200,
});
var fixedLayer = new Kinetic.Layer();
stage.add(fixedLayer);
var old_x = 100;
var old_y = 100;
var scroller = new Kinetic.Circle({
x: old_x,
y: old_y,
radius: 10,
fill: '#00F',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
scroller.on('dragmove', function(event){
var pos = scroller.getAbsolutePosition();
layer.move(pos.x - old_x, pos.y - old_y);
old_x = pos.x;
old_y = pos.y;
layer.draw();
});
fixedLayer.add(scroller);
var layer = new Kinetic.Layer();
stage.add(layer);
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 50,
height: 50,
fill: '#0F0',
stroke: 'black',
strokeWidth: 4
});
rect.on('click', function(){
rect.remove();
layer.draw();
});
layer.add(rect);
layer.draw();
fixedLayer.draw();
Is this a bug or am I doing something wrong?

When you use a drag event, KineticJS create a temporary layer on top as a result of which your events where not getting registered after the dragmove.
Just add another handler for dragend like this:
scroller.on('dragend', function(event){
layer.moveToTop();
layer.draw();
});
And here is the updated fiddle.
For more details/explanation on the problem you faced, check this: https://github.com/ericdrowell/KineticJS/issues/219

KineticJS Image and Rect Not Layering Correctly

Ok, so I am new to KineticJS and while playing with it, I can't seem to combine an image background with a rectangle layered above that image. Now, if I remove the background image, then the rectangle shows. Even if I put the rectangle code above the image, still doesn't show on top. Sure it is something simple I am missing but I can't seem to figure out what it is and can't find a similar issue here on stackoverflow. Thanks for the help.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 450
});
//Layer for our background
var background_layer = new Kinetic.Layer();
//Canvas background image
var canvasBackgroundImage = new Image();
canvasBackgroundImage.onload = function() {
var backgroundImage = new Kinetic.Image({
x: 0,
y: 0,
image: canvasBackgroundImage,
width: 600,
height: 450
});
background_layer.add(backgroundImage);
stage.add(background_layer);
};
canvasBackgroundImage.src = 'images/quiz_back.jpg'; //Location of our background
//Question container
var question_container_layer = new Kinetic.Layer();
var question_container = new Kinetic.Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
question_container_layer.add(question_container);
stage.add(question_container_layer);
</script>
</body>

Your problem is that you're adding background_layer to the stage inside the canvasBackgroundImage.onload function. Javascript will run through the entire script, and add the question_container_layer to the stage first, AND THEN when your image loads, the background_layer will be added to the stage. As a result, the background image always appears on top of your rectangle layer.
To fix this, add the layers to your stage outside of your onload function:
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 450
});
//Layer for our background
var background_layer = new Kinetic.Layer();
var question_container_layer = new Kinetic.Layer();
stage.add(background_layer);
stage.add(question_container_layer);
//Canvas background image
var canvasBackgroundImage = new Image();
canvasBackgroundImage.onload = function() {
var backgroundImage = new Kinetic.Image({
x: 0,
y: 0,
image: canvasBackgroundImage,
width: 600,
height: 450
});
background_layer.add(backgroundImage);
background_layer.draw();
};
canvasBackgroundImage.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Location of our background
//Question container
var question_container = new Kinetic.Rect({
x: 50,
y: 50,
width: 200,
height: 200,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
question_container_layer.add(question_container);
question_container_layer.draw();
</script>
To avoid this in the future, unless you have dynamic layers to be added to the stage, I would recommend adding all known layers to the stage before doing anything else. That way you can control the ordering of your layers.
Or alternatively, you can use the zIndex property to order your layers. See here: Kinetic.Container#setZIndex

How to crop an image with canvas and Kinetic.js

my function draw an image, and another image on another layer with Kinetic.js but i want to crop the second image which is named smsTopBg_image
window.onload = function() {
//INITIALISATION
var stage = new Kinetic.Stage({
container: "iPhone",
width: 480,
height: 720
});
//LAYERS
var background_layer = new Kinetic.Layer();
var sms_layer = new Kinetic.Layer();
var text_layer = new Kinetic.Layer();
//ELEMENTS
var iPhoneBg = new Image();
iPhoneBg.onload = function() {
var iPhoneBg_image = new Kinetic.Image({
image: iPhoneBg
});
background_layer.add(iPhoneBg_image);
stage.add(background_layer);
}
iPhoneBg.src = "iPhoneBg.jpg";
//--------------------------------------------------
var smsTopBg = new Image();
smsTopBg.onload = function() {
var smsTopBg_image = new Kinetic.Image({
image: smsTopBg,
x: 10,
y: 10,
});
sms_layer.add(smsTopBg_image);
stage.add(sms_layer);
}
smsTopBg.src = "iPhoneBg.jpg";
};
Thanks !

You can add an optional crop object to the main attributes object in your Image constructor.
It has an x, y, width and height properties.
var smsTopBg_image = new Kinetic.Image({
image: smsTopBg,
x: 10,
y: 10,
// random values, choose your own :
crop: {
x: 20,
y: 3,
width: 100,
height: 42
}
});

Ok ifound the complete solution with your help, it's necessary to add height and with to the image before crop like that :
var smsTopBg = new Image();
smsTopBg.onload = function() {
var smsTopBg_image = new Kinetic.Image({
image: smsTopBg,
x: 200,
y: 20,
width: 50,
height: 20,
crop: {
x: 20,
y: 10,
width: 50,
height: 50
}
});
sms_layer.add(smsTopBg_image);
stage.add(sms_layer);
}
Thanks !

Refer this url for Image Crop in Kinetic.js : http://jsfiddle.net/umhm7/