I want to use the Kinetic js library in order to make the drag and resize effect in my images on the canvas.
So I am following this example http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
My html let's say is like that:
.....
<div id="container"></div>
.....
Then on load I do:
$(document).ready(function() {
loadImage()
});
function loadImage(){
imageObj = new Image();
imageObj.onload = function(){
var stage = new Kinetic.Stage("container", 578, 200);
var layer = new Kinetic.Layer();
var x = stage.width / 2 - 200 / 2;
var y = stage.height / 2 - 137 / 2;
var image = new Kinetic.Image({
image: imageObj,
x: x,
y: y
});
image.draggable(true);
// add cursor styling
image.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
image.on("mouseout", function(){
document.body.style.cursor = "default";
});
layer.add(image);
stage.add(layer);
};
imageObj.src = 'myImage.png';
}
But what I get is this message:
"Uncaught TypeError: Cannot call method 'appendChild' of undefined"
referring I think in the container div.
What could be the problem?
Thanks in advance
The constructor call is not right.
Try
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 363
});
For the drag part, you can make your layer draggable with
var layer = new Kinetic.Layer({draggable: true});
You can see a basic example of this working in this fiddle
Try setDraggable:
image.setDraggable(true);
But, have to ask, why dont you use the canvas constructor from Kinetic? I believe that you cannot use this library if you are manipulating the canvas directly
Related
I have an image that is manipulated using the Caman library.
I am trying to overlay a jpeg to the manipulated image.
I can see the jpeg appearing for a split second beneath the manipulated image, but it is quickly overlaid once the manipulated image fully loads.
No matter what order the code is in below, the overlay image lies beneath the manipulated image.
Is there an obvious solution to this? Thank you!
<script>
$(function() {
var canvas = document.getElementById('image1');
Caman("#image1", "pic.jpg", function () {
this.brightness(50).render();
});
//add text layer
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'yoda.jpg';
});
</script>
Might need a little refactoring, but this is how I did it:
<script>
$(function() {
var canvas = document.getElementById('image1');
Caman("#image1", "pic.jpg", function () {
this.greyscale().render();
this.newLayer(function () {
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'overlay.png';
});
});
});
</script>
I'm pretty new to js and have only done a little bit of html however this seems like something that would be simple: I'm just trying to draw an image onto a canvas! If adding the new image to my main div (gameObjectElement) it works fine, but when trying to draw it on a canvas it doesn't show. The fill text shows up on the canvas so I believe the context stuff is correct.
var marthPic = new Image();
marthPic.src ='images/marth.jpg';
$(gameObjectElement).append(marthPic);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",300,50);
ctx.drawImage(marthPic, 100, 100);
Any ideas?
thanks
You need to wait for the image to actually be loaded before you add it to the canvas. You can do this with an onload handler:
var marthPic = new Image();
marthPic.src ='images/marth.jpg';
$(gameObjectElement).append(marthPic);
marthPic.onload = function () {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",300,50);
ctx.drawImage(marthPic, 100, 100);
};
Edited because I'm a noob (lucky cache hit):
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var marthPic = new Image();
marthPic.src = 'images/marth.jpg';
marthPic.onload = function() {
ctx.drawImage(marthPic,10,10);
};
</script>
Demo
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);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
var amplitude = 150;
var period = 2000;
// in ms
var centerX = stage.getWidth() / 2;
var anim = new Kinetic.Animation(function(frame) {
yoda.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
}, layer);
anim.start();
How would I have the yoda image animate from left to right, say 50px, once on page load? Is it possible to do this with easing as well? Very new to canvas, thanks for any help. Would this be better suited to be left to jQuery instead?
If you look at console you'll see that yoda is not defined. This is happening because image.onload is a function and variables created inside a function are visible only inside that function. So you need to create yoda outside a function.
Also start the animation only after the image is loaded.
Modified Fiddle
I am trying to make KineticJs html 5 custom shape.
But it is not working in Google chrome. Not draggable in Firefox and also shape are not same in size.
Can anybody tell why?
live code http://jsfiddle.net/prantor19/wGE2a/8/
var stage = new Kinetic.Stage({
container: 'canvas-container',
width: 500,
height: 500,
});
var layer = new Kinetic.Layer();
drawWindow = function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(this.attrs.x,this.attrs.y);
context.lineTo(this.attrs.width,this.attrs.y);
context.lineTo(this.attrs.width,this.attrs.height);
context.lineTo(this.attrs.x,this.attrs.height);
context.closePath();
context.clip();
context.drawImage(img,this.attrs.img_x,this.attrs.img_y);
}
img = document.createElement('img');
img.src= "http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG/1024px-Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG";
var window1 = new Kinetic.Shape({
drawFunc: drawWindow,
x: 0,
y: 0,
width: 100,
height: 100,
img:img,
img_x:0,
img_y:0,
draggable: true
});
var window2 = new Kinetic.Shape({
drawFunc: drawWindow,
x: 10,
y: 60,
width: 100,
height: 100,
img:img,
img_x:-250,
img_y:0,
draggable: true
});
pointercursor = function() {
document.body.style.cursor = 'pointer';
}
defaultCursor = function() {
document.body.style.cursor = 'default';
}
window1.on('mouseover',pointercursor );
window1.on('mouseout', defaultCursor);
window2.on('mouseover',pointercursor );
window2.on('mouseout', defaultCursor);
layer.add(window1);
layer.add(window2);
stage.add(layer);
Your script has errors in it
Unable to get image data from canvas because the canvas has been tainted by cross-origin data. kinetic-v4.3.2-beta.js:4365
Uncaught Error: SecurityError: DOM Exception 18
Chrome refuse to work with cross domain images on cavas.
For dragging, you need to add this set stroke for the shape
stroke: 'black',
and at the end of drawFunc
canvas.fillStroke(this);
Here is the my working version from yours
http://jsfiddle.net/W7SGT/
You should be using the canvas renderer when drawing a custom shape in KienticJS, or else it has no way to handle the events on the shape. Here's a tutorial on custom shapes:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/
you might also take a look at the Kinetic.Image shape to see how it handles images specifically:
https://github.com/ericdrowell/KineticJS/blob/master/src/shapes/Image.js
I am using KinetickJS to draw images on screen.
I have a layer on the stage, and recieve 1000 of images in base64 format.
First I try to draw them with Kinetic
Example 1, works fine BUT after 1000 of images when I try to drag or do something with layer it became veeeeeeeery slow.So I try next example
var imageObj = new Image();
imageObj.onload = function () {
var image = new Kinetic.Image({
x: imageInfo.LocationX,
y: imageInfo.LocationY,
image: imageObj,
width: imageInfo.Width,
height: imageInfo.Height,
name: "Update"
});
layer.add(image);
layer.draw();
};
imageObj.src = "data:image/jpeg;base64," + imageInfo.Image;
Example 2, but in this case canvas began blinking for each update
var imageObj = new Image();
imageObj.onload = function () {
var canvas = layer.canvas;
var context = canvas.getContext('2d');
// context.globalCompositeOperation = "destination-over";
context.drawImage(imageObj, imageInfo.LocationX, imageInfo.LocationY);
};
imageObj.src = "data:image/jpeg;base64," + imageInfo.Image;
So do you have any ideas how to make it faster and/or disable blinking?
The newest KineticJS 4.3 speeds up dragging and other functionality quite a lot. This would probably fix your problem.
http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js