i have amended fiddle little link. trying not load both images in @ start - first one.
then when user clicks on house loaded in - want to, @ point, load in second house.
i trying mimick behaviour using fiddle: 1) user clicks on image 2) server generates , chucks across name of generated jpg.
to avoid doing in fiddle, have added line:
var newhouse = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg";
3) jpg replaces existing 1 when original image clicked.
for reason, code isn't doing it:
var newimage = new image(); newimage.onload = function () { var image = new kinetic.image({ id: i, image: newimage, x: 0, y: 0, width: 205, height: 205, name: 'image', stroke: 'red', strokewidth: 2, strokeenabled: false }); }; newimage.src = newhouse; // keep kinetic.image object // replace image imageobject.setimage(newimage); many help!
loading new image server & using replace existing image object's image
the key wait until new image (house3) has been loaded before trying swap.
function swap(){ // image object selected group var imageobjects = group.get("image"); var imageobject=imageobjects.toarray()[0]; // load second image var house3=new image(); house3.onload=function(){ // know second image has been downloaded // keep kinetic.image object // replace image imageobject.setimage(house3); layer.draw(); } house3.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg"; } here code , fiddle: http://jsfiddle.net/m1erickson/wscfv/2/
<!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.5.4.min.js"></script> <style> #container{ border:solid 1px #ccc; margin-top: 10px; width:400px; height:400px; } </style> <script> $(function(){ var stage = new kinetic.stage({ container: 'container', width: 400, height: 400 }); var layer = new kinetic.layer(); stage.add(layer); var group=new kinetic.group({width:205,height:205}); layer.add(group); var house1=new image(); house1.onload=function(){ start(); } house1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg"; var image; var rect; var currentimageindex; function start(){ image=new kinetic.image({ image:house1, x:0, y:0, width:204, height:204, }); group.add(image); currentimageindex=0; rect = new kinetic.rect({ x: 0, y: 0, width: 205, height: 205, stroke: "blue", strokewidth: 4 }); group.add(rect); layer.draw(); console.log("started"); } function swap(){ currentimageindex = (currentimageindex==0 ? 1 : 0); // image object selected group var imageobjects = group.get("image"); var imageobject=imageobjects.toarray()[0]; // load second image var house3=new image(); house3.onload=function(){ // know second image has been downloaded // keep kinetic.image object // replace image imageobject.setimage(house3); layer.draw(); } house3.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg"; } $("#swap").click(function(){ $("#swap").hide(); swap(); }); }); // end $(function(){}); </script> </head> <body> <div id="container"></div> <button id="swap">swap images</button> </body> </html> 
Comments
Post a Comment