I tried a simple KineticJS example hosted on my own server, and I have a problem placing the 4 handles at the 4 corners of the Image. The handle points will be at the wrong position, as shown in the screencap below. However the handles are position correctly in the jsfiddle!
jsfiddle: http://jsfiddle.net/NPB77/
I'm very new to KineticJS, will really appreciate if I can be pointed in the right direction, thank you!
Update
jsfiddle: http://jsfiddle.net/NPB77/1/
Solved by placing addAnchor within the imageObj.onload() function.
var imageObj = new Image();
imageObj.onload = function() {
var thing = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj
});
addAnchor(thingGroup, 0, 0, "topLeft");
addAnchor(thingGroup, imageObj.width, 0, "topRight");
addAnchor(thingGroup, imageObj.width, imageObj.height, "bottomRight");
addAnchor(thingGroup, 0, imageObj.height, "bottomLeft");
thingGroup.add(thing);
stage.draw();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
However, now when I drag the corner handles which is supposed to rescale the image, I get the error:
Uncaught TypeError: Cannot call method 'setPosition' of undefined
What went wrong here? I dont understand why group.get(".topLeft") is not working, is this a scope problem?
When you create thing in your initStage function give it an id that you can reference later.
So it looks like this...
var thing = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
id: "thingImage"
});
..then in your update function you can reference it like this...
var image = group.get("#thingImage")[0];
Here's a working example...
http://jsfiddle.net/NPB77/2/
Related
I cannot seem to find how to add an image to Javascript. I'm currently creating an animation and all I want to do is at the start of the animation I was going to add 4 numbers that count down from 4 in time to music.
I was going to make each number fly off the side of each corner of the page to indicate the countdown, but I can't seem to insert any of my images.
I've tried using code I've found online, but nothing seems to work.
Can someone help give me the exact code I'd need to put an image into my Javascript?
My Code looks something like this.
window.onload= function (){
var paper = new Raphael( 0, 0, 800, 600);
var backGround = paper.rect(0,0,800,600);
backGround.attr({ fill: "black"});
/* Comment - Add your code here*/
var ball = paper.circle(40,270,10);
var paddleleft = paper.rect(10, 230, 15, 100);
var paddleright = paper.rect(775, 230, 15, 100);
var line = paper.rect(400, 0, 5, 600);
ball.attr({ fill: "white"});
paddleleft.attr({ fill: "white"});
paddleright.attr({ fill: "white"});
line.attr({ fill: "white"});
function bounce_drop1() {
ball.animate({cy: 50 , cx: 750}, 500, 'ease-in', bounce_up1);
}
function bounce_up1() {
ball.animate({cy: 50, cx: 750}, 500, 'ease-out', bounce_drop2);
}
bounce_drop1();
function bounce_drop2() {
ball.animate({cy: 570 , cx: 400}, 500, 'ease-in', bounce_up2);
}
function bounce_up2() {
ball.animate({cy: 50, cx: 50}, 500, 'ease-out', bounce_drop1);
}
};
I'm not sure where exactly the put the image, but following the posts below I've attempted this.
var imgSrc = "http://www.pnglogo.com/wp-content/uploads/2015/10/4-Number-Clipart-PNG-02202.png";
var img = new Image();
img.src = imgSrc;
document.getElementById('mygallery').appendChild(img);
But it's not doing anything, am I meant to state the image as a variable?
Sorry I'm new to using Javascript and I apparently need "imported bitmap images" into my animation.
So I´m guessing you have some sort of HTML file which loads up your javascript. To get an image into that you will need to:
create a new HTML node of the type <img />
This node will need src attribute to define where the image is coming from (maybe from your local file system or hosted anywhere in the web).
After you created the HTML node you need to append it to an already existing DOM-Node to actually "show up".
When this is all done you should have your image nodes and can animate/manipulate them anyway you want e.g. with CSS or JavaScript
Code might look something like this:
var img = document.createElement('img);
img.src = 'http://somelinktoanimage';
var parentNode = document.getElementById('parentNodeId');
parentNode.appendChild(img);
This is a VERY basic example and with your information given I´m not really sure if it applies to your use case.
Also I recommend reading up on some basic stuff:
Web technology for developers MDN
it is very simple to create and add an image on the DOM.
create image object and add it to the DOM:
var imgSrc = "http://fabricjs.com//assets/pug_small.jpg";
var img = new Image();
img.src = imgSrc;
document.getElementById('mygallery').appendChild(img);
live jsfiddle: http://jsfiddle.net/tornado1979/p3h67n1u/
hope helps ,good luck.
I've checked this forum/the internet/google forwards and backwards for my particular question, but to no avail. I get examples that come close to mine - which I try to impart into my own example, but nothing doing. Please help! Again I apologize if this has been answered and I just overlooked, if so please throw me a link - otherwise here is my code:
All I'm trying to do is animate a single sprite image of a jumping Mega Man.
Thanks, and Happy Holidays!
NOTE: Here the sprite I'm using
HERE IS MY: JsFiddle
var stage, canvas,
bmpA, data,
megaman, spriteSheet;
function Main() {
canvas = document.getElementById('canvas');
stage = new createjs.Stage(canvas);
container = new createjs.Container();
megaman = new Image();
megaman.src = "megaman__jump.png";
var bmpA = new createjs.Bitmap(megaman);
data = new createjs.SpriteSheet({
images: [bmpA],
frames: {
width: 79,
height: 139,
count: 7
},
animations: {
jump: [0, 6, "jump"]
}
});
spriteSheet = new createjs.BitmapAnimation(data);
spriteSheet.gotoAndPlay("jump");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
stage.addChild(spriteSheet);
stage.update();
}
</script>
</head>
<body onload = "Main();">
<canvas id = "canvas" width = "780" height = "300"
style = "border: 1px solid #000;"></canvas>
</body>
</html>
[1]: http://i.imgur.com/Q1OQM.png
Here is a quick edit. http://jsfiddle.net/lannymcnie/f58mr0Lk/9/
Your Fiddle wasn't very helpful, since it was just your code pasted in. I modified it to drop the body tag (jsfiddle does that for you), import easeljs, and use the full image path.
The BitmapAnimation class was renamed to Sprite sometime ago. I am not sure what version of EaselJS you are using, but it might not have that class anymore.
I removed the Bitmap. The SpriteSheet data accepts either a string path, or an Image reference, not a Bitmap.
As I suggested below, I pulled out the entire update method, added the Sprite one time, and then had the tick just update the stage directly.
The fiddle "works" now, but the spritesheet dimensions don't seem right. Have a look.
data = new createjs.SpriteSheet({
images: ["http://i943.photobucket.com/albums/ad274/Rah5er0/megaman__jump.png~original"],
frames: {
width: 79,
height: 139,
count: 7
},
animations: {
jump: [0, 6, "jump"]
}
});
var sprite = new createjs.Sprite(data);
eUsing Raphael.js 2.1.0 I am trying to add two background image to the paper object like:
var w = 794;
var h = 680;
var map = Raphael("canvas");
map.image('http://1.png', 0, 0, 794, 680);
map.image('http://2.png', 0, 0, 794, 680);
Or
var w = 794;
var h = 680;
var map = Raphael("canvas");
map.rect(0,0, 794, 680).attr({
fill: "url(http://1.png)"
});
map.rect(0,0, 794, 680).attr({
fill: "url(http://2.png)"
});
now I need to find a way to enable user to change ONLY the second background image (from image() or fill:) by changing a Select option list of images but I do not know how to target the second background using jQuery or JavaScript.
Can you please let me know how I can do this?
Thanks
There's a few bits to get to the point mentioned in the comment.
You need to reference the image2, and then you will need to remove() it. So your click function would look something like this...
$("#change").on("click",function(){
image2.remove();
image2 = map.image('myimageurl.png', 0, 0, 500, 500).insertBefore( circle );
});
Note the .insertBefore( element ) function thats used. This will put the element behind the circle, so the hover will still work.
jsfiddle
I am working on a collage in HTML5 canvas. However, I am finding difficulty in arranging the images in different angles. I want to arrange first pic at angle of PI/4 and the other one at angle -PI/70. Here is the jsFiddle with the problem.
var pic1 = new Image();
pic1.src = "http://www.fantom-xp.com/wallpapers/23/Windows_7_-_Swan.jpg";
context.translate(170,170);
context.rotate(Math.PI/8);
pic1.onload = function(){
context.drawImage(pic1, 20, 20, 200, 200);
}
var pic2 = new Image();
pic2.src = "http://www.redorbit.com/media/uploads/2004/10/38_ec8164eb3e4bddf76ef1b8eb564b9514.jpg";
context.translate(100,10);
context.rotate(-Math.PI/70);
pic2.onload = function(){
context.drawImage(pic2, 0, 0, 200, 200);
}
What am I missing?
Assuming you want to rotate your images around their center points you need to use this drawImage:
context.drawImage(image, -image.width/2, -image.height/2).
That's because the translate point becomes the rotation point.
Here's a generic image rotation function:
function tiltedPicture(centerX,centerY,degreeAngle,image){
ctx.save();
ctx.translate(centerX,centerY);
ctx.rotate(degreeAngle*Math.PI/180);
ctx.drawImage(image,-image.width/2,-image.height/2);
ctx.restore();
}
There are some issues in your code.
First of all, your first image couldn't be loaded. You will see it when you add:
pic1.onerror = function() {
console.log('Error loading');
}
Next you should use save and restore methods. Read here.
The problem is when you call twice context.translate(170,170); you will get th final translation at x: 340, y: 340. If you will combine more complex transformaions you could get result which is hard to predict. Fortunatelly there are methods save and restore. Save - saves current transformation state, and Restore - restores last saved state.
Usage in your case (for the first pic):
pic1.onload = function(){
context.save();
context.translate(170,170);
context.rotate(Math.PI/2);
context.drawImage(pic1, 20, 20, 200, 200);
context.restore();
}
pic1.onerror = function() {
console.log('error loading');
}
See demo.
I have an image in my code, as defined here
var imageObj = new Image();
imageObj.onload = function(){
imageF = new Kinetic.Image({
x: 0,
y: 0,
scale: (100,100),
image: imageObj,
name: "fluffy",
});
layer.add(imageF);
stage.add(layer);
stage.start();
}
imageObj.src = "Flutter_Fluffy_100.png";
And I would like to be able to have it flip (horizontally) at certain times in the running. I tried to change the image source to a pre-flipped one, but that caused, well, a lot of problems with the image duplicating, resetting position and lots of stuff. Is there a method to flip an image that is created and used this way? Thanks!
This is probably what you want:
//imageF.scale.y =-1;
imageF.scale.x =-1;
It's demonstrated here:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-scale-animation-tutorial/
It's pretty much the same with an image:
http://randompast.github.io/randomtests/kineticjs/FlipImage-Demo.html
edit: fixed link