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();
Related
I am simply trying to render an image with Kinetic, but nothing appears, nor do i get an error.
The fiddle can be found here.
Source code:
$( function() {
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 800
});
var layer = new Kinetic.Layer();
var yoda = new Kinetic.Image({
x: 0,
y: 0,
width: 200,
height: 400
});
var imageObj = new Image();
imageObj.src = 'http://farm6.staticflickr.com/5448/9408019718_88934b087e_b.jpg';
imageObj.onload = function() {
yoda.setImage(imageObj);
layer.draw();
};
layer.add(yoda);
stage.add(layer);
});
You must use <div> container for KineticJS Stage:
<div id="container"></div>
http://jsfiddle.net/ro1zpkaL/1/
I see in others examples that all person apply this filter in images...
My question is know if I can apply a blur filter in a shape:
I prove this and does not work
window.onload = function(){
function writeMessage(message) {
text.setText(message);
layer.draw();
}
var stage = new Kinetic.Stage({
container: 'container',
width: 3600,
height: 1600
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Path({
x: 200,
y: 0,
data:'m306,316.36069l36.11703,39.66971l8.47302,-43.01529l60.22296,32.44058l-19.99786,-42.15051l78.43591,22.03604l-32.51349,-63.15952l80.97086,-69.52588l-84.47522,39.46899l119.7962,-83.01416l-131.73438,66.88934l42.73438,-33.11069l-59.7962,18.98587l103.47522,-105.53102l-120.97086,95.47411l107.51349,-175.1595l-143.43591,162.03607l-20.00214,-86.15053l-17.22296,85.44057l-98.47302,-148.01527l74.88297,148.66971l-65.11703,-68.66971l41.52701,73.01527l-126.22301,-106.44057l80.99785,116.15053l-61.43588,-46.03607l40.5135,56.1595l-150.97088,-117.47411l138.4752,130.53102l-107.7962,-45.98587l90.73441,63.11069l-53.73441,-9.88934l50.7962,31.01416l-67.4752,43.53101l88.97088,-9.47412l-46.5135,37.15952l78.43588,-22.03604l-19.99785,42.15051l60.22301,-32.44058l8.47299,43.01529l36.11703,-39.66971z',
fill:'rgba(255,197,0,0.4)',
stroke:'rgba(255,132,23,0.00)',
// shadowColor:'rgb(255,132,23)',
// shadowBlur : 156
filter: Kinetic.Filters.Blur,
blurRadius: 20
});
layer.add(shape);
stage.add(layer);
}
http://jsfiddle.net/LwbUC/1/
I found the solution...
I wrote this code and it works:
shape.cache({
x : -5,
y : -5,
width : 500,
height : 500
});
shape.filters([Kinetic.Filters.Blur]); //nothing happens
shape.blurRadius(30);
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
Hi I am looking to make a floor plan editor (something like MsPaint) using JavaScript. I have shortlisted EaselJS or KinetiJS as my preferred libraries.
I would like to know how to create a dynamic rectangular box/line with these libraries. I intend to draw a rectangle by clicking the mouse and dragging it (while the mouse button remains pressed). Thus the size of the rectangle will depend on how far the mouse is dragged.
Any help will be appreciated. If anyone feels that any other library like fabrisJs or paperJs will be better alternative then I am open to solutions in these libraries as well.
Ok... by trial and error and lots of googling and reusing net code I got the answer for KineticJs.
Heres the complete solution:
http://jsfiddle.net/sandeepy02/8kGVD/
<html>
<head>
<script>
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
layer.add(background);
stage.add(layer);
moving = false;
stage.on("mousedown", function(){
if (moving){
moving = false;layer.draw();
} else {
var mousePos = stage.getMousePosition();
rect= new Kinetic.Rect({
x: 22,
y: 7,
width: 0,
height: 0,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
//start point and end point are the same
rect.setX(mousePos.x);
rect.setY(mousePos.y);
rect.setWidth(0);
rect.setHeight(0);
moving = true;
layer.drawScene();
}
});
stage.on("mousemove", function(){
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
rect.setWidth(mousePos.x-rect.getX());
rect.setHeight(mousePos.y-rect.getY());
moving = true;
layer.drawScene();
}
});
stage.on("mouseup", function(){
moving = false;
});
};
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>
By default, Kineticjsv4.0.5 does not support image border, therefore .showBorder() and .hideBorder() would result in error saying
Uncaught TypeError: Object # has no method 'showBorder'
But when I included the Image Plugin v1.0.1 javascript file, my game did not appear at all while FireBug reported no errors at all.
I have also started an issue on github.
Regards,
Try this code
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.5.js"></script>
<script>
window.onload = function() {
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: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118,
stroke:"Red",
strokeWidth:5
});
// add the shape to the layer
layer.add(yoda);
// add the layer to the stage
stage.add(layer);
yoda.on('mouseover', function() {
yoda.setStrokeWidth("Transparent");
yoda.setStroke(0);
layer.draw();
});
};
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>