Image does not render with KineticJS - javascript

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/

Related

Drag and drop images on HTML5 with touch screen

I have a script that works properly, shows an image and you can drag and drop that image. But my problem is: how can I add more images? If I copy the same code, it doesn't show two images.
<script src="http://d3lp1msu2r81b...c-v5.0.2.min.js"></script>
<script defer="defer">
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 600
});
var layer = new Kinetic.Layer();
// darth vader
var darthVaderImg = new Kinetic.Image({
image: imageObj,
x: 100,
y: 30,
width: 40,
height: 40,
draggable: true
});
// add cursor styling
darthVaderImg.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
darthVaderImg.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(darthVaderImg);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'adorno1.png';
</script>
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 600
});
var layer = new Kinetic.Layer();
// darth vader
var darthVaderImg = new Kinetic.Image({
image: imageObj,
x: 0,
y: 0,
width: 100,
height: 100,
draggable: true
});
var darthVaderImg1 = new Kinetic.Image({
image: imageObj1,
x: 100,
y: 100,
width:100,
height: 100,
draggable: true
});
// add cursor styling
darthVaderImg.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
darthVaderImg.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(darthVaderImg);
layer.add(darthVaderImg1);
stage.add(layer);
}
var imageObj = new Image();
var imageObj1 = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj1.onload = function() {
drawImage(this);
};
imageObj.src='http://i.forbesimg.com/media/lists/companies/google_416x416.jpg';
imageObj1.src='http://i.forbesimg.com/media/lists/companies/google_416x416.jpg';
here is the answer for your question
http://jsfiddle.net/ajayholla/71qrotzz/5/

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();

Kinetic.js not tweening image at all, not sure what Im doing incorrectly

Im just trying to have the image tween slowly to the left. As far as I can tell, the code is correct. The image loads, but there is no motion.
var stage = new Kinetic.Stage({
container: 'container',
width: 1920,
height: 1080
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var space = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 1920,
height: 1080
});
// add the shape to the layer
layer.add(space);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = 'http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png';
var tween = new Kinetic.Tween({
node: space,
duration: 20,
x: -1920,
y: 0,
});
setTimeout(function() {
tween.play();
}, 2000);
A few scoping problems with the code:
Make sure your space and tween variables are in scope (currently hidden in .onload)
Since the image will take time to load, you should start the tween in imageObj.onload
Here's code and a Demo: http://jsfiddle.net/m1erickson/JT2cD/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:500px;
height:500px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
stage.add(layer);
var space;
var tween;
var imageObj = new Image();
imageObj.onload = function() {
space = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 1920/4,
height: 1080/4
});
// add the shape to the layer
layer.add(space);
// add the layer to the stage
stage.add(layer);
tween = new Kinetic.Tween({
node: space,
duration: 20,
x: -1920/4,
y: 0,
});
setTimeout(function(){ tween.play(); }, 2000);
};
imageObj.src = 'http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png';
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

kineticjs: rotate image by certain angle and stop

I'm completely new in HTML and kineticjs and I want to create an animation, which rotates an image around a certain point and by a certain angle. Then it has to stop.
Later I want to implement a way to control the angle by clicking a button. But to the first problem: This is the code so far:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js"> </script>
<script defer="defer">
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,
//offset: [x:250, y: 100]
});
/*var imageObj2 = new Image();
imageObj.onload = function() {
var background = new Kinetic.Image({
x: 200,
y: 50,
image: imageObj,
width: 106,
height: 118,
}); */
// add the shape to the layer
layer.add(yoda);
//layer.add(background)
// add the layer to the stage
stage.add(layer);
var angularSpeed = 360 / 4;
var anim = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
yoda.rotate(angleDiff);
}, layer);
anim.start();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
//other image source
</script>
</body>
</html>
Source: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/
So how can I make the animation stop after - say - 50°?
Thanks for your help!
You can use Tween:
var tweaktween = new Kinetic.Tween({
node : yoda,
rotation : 50,
duration: 1
});
tween.start();
demo: http://jsfiddle.net/lavrton/2DDtW/

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/

Categories

Resources