Databases
StackOverflow2013
Postsdbo
POKinetic.js removing image from canvas on click of a button outside the canvas
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKinetic.js removing image from canvas on click of a button outside the canvas
    text
    copied!<p>Need some help.. I don't know if it's the kinetic.js library problem or I'm doing something wrong here.. I am loading 2 images on windows.onload and then there are set of images outside the canvas and onclick of the images I'm placing those inside the canvas which is working fine..(I have used just a single function to load any image from outside the canvas by doing this.. Set of images :</p> <pre><code> &lt;li&gt; &lt;a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i3'))"&gt; &lt;img src="&lt;?php echo base_url()?&gt;images/eagle/baby1.png" id="i3" alt="Pulpitrock"width="100" height="120" /&gt;&lt;/a&gt; &lt;a href="javascript:void(0)" onclick="removewithType(document.getElementById('i3'))"&gt;Close&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i4'))"&gt; &lt;img src="&lt;?php echo base_url()?&gt;images/eagle/pattern-1.png" id="i4" alt="Pulpit rock" width="100" height="120" /&gt;&lt;/a&gt; &lt;a href="javascript:void(0)" onclick="removewithType(document.getElementById('i4'))"&gt;Close&lt;/a&gt; &lt;/li&gt; </code></pre> <p>loading images</p> <pre><code> function loadWithType(img){ var sources = { yoda1 : img.src, }; loadImages(sources,initStage1); }; </code></pre> <p>function(defining position and all)</p> <pre><code> function initStage1(images){ layert = new Kinetic.Layer(); var yoda1 = new Kinetic.Image({ image: images.yoda1, x: 106, y: 0, width: 180, height: 220, draggable:true, detectionType: "pixel" }); /* * check if animal is in the right spot and * snap into place if it is */ yoda1.on("dragend", function() { layert.draw(); // disable drag and drop yoda1.saveImageData(); }); layert.add(yoda1); stage.add(layert); yoda1.saveImageData(); } </code></pre> <p>THis is working fine..(loading the images on clicking over them)</p> <p>But when I try to remove the images by a button close.. I m having trouble as the latest image gets removed and after that library throws me an error.. I'm doing something like this..</p> <pre><code> function removewithType(img){ var sources = { yoda1 :img.src, }; loadImages(sources,removeStage1); } function removeStage1(images){ var yoda1 = new Kinetic.Image({ image: images.yoda1, x: 106, y: 0, width: 180, height: 220, draggable:true, }); layert.clear(); stage.remove(layert); layert.draw(); } </code></pre> <p>here first of all.. layert.remov(yoda1) function is not working.</p> <p>and this function is behaving in an unexpected way..</p> <p>any pointers</p> <p>Thanks..</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload