CODEWITHSUNDEEP
jquerykineticjs
maddogandnoriko
maddogandnoriko

Reputation: 1002

KineticJs change Image Object

I am trying to replace an existing image object on a kineticJS stage/layer with a new image when the user choose an item in a drop down menu. The code below works but when the image is changed by #template_select the original image doesn't look like it is being removed, the new image is just being added.

Once again...Thank you so much,

Todd

KineticJS:

    var stage = new Kinetic.Stage({
        container: 'tag_canvas',
        width: 306,
        height: 306
    });

    var layer = new Kinetic.Layer();
    var imageObj = new Image();

    var kinetic_common_name = new Kinetic.Text({
        x: 30,
        y: 40,
        text: commonname,
        fontSize: commonFontSize,
        fontFamily: commonFont,
        fill: 'green',
        draggable: true
    });
    var kinetic_botanical_name = new Kinetic.Text({
        x: 80,
        y: 115,
        text: latinname,
        fontSize: latinFontSize,
        fontFamily: latinFont,
        fill: 'green',
        draggable: true
    });

    imageObj.onload = function() {

        var template_image = new Kinetic.Image({
            x: 0,
            y: 0,
            image: imageObj,
        });

        // add the shape to the layer
        layer.add(template_image);
        layer.add(kinetic_common_name);
        layer.add(kinetic_botanical_name);

        // add the layer to the stage
        stage.add(layer);


    contextt.translate(306, 0);
    contextt.scale(-1, 1);

    contextt.drawImage(newRev, 0, 0);

    }; //END imageObj.onload
    imageObj.src = getTemplatePath(tag_template);


    var canvass = document.getElementById('reverse_tag_canvas');
    var contextt = canvass.getContext('2d');
    var newRev = layer.getCanvas().getElement();

  layer.afterDraw(function(){
        contextt.drawImage(newRev, 0, 0); //redraw reverse image
  });




    //change template
  $("#template_select").change(function(){
        imageObj.src = getTemplatePath($(this).val());
    layer.draw();

  });

HTML

Choose a template: 
<select id="template_select" name="template_select">
  <option value="sm_oval">Small Oval</option>
  <option value="lg_oval">Large Oval</option>
  <option value="xlg_oval">Extra Large Oval</option>
  <option value="hibiscus">Hibiscus</option>
</select>

I usually do not like to put my url up but a js fiddle didn't seem to work with kinetic js. So you can try the template select menu here: http://planttagmaker.herobo.com/index copy.php

Upvotes: 0

Views: 1799

Answers (1)

allenhwkim
allenhwkim

Reputation: 27738

Make image.onload do only change image and nothing else. Therefore move out all unnecessary code from that function.

In your code, whenever image is loaded, you are adding shapes, layers, and much more.

That's causing the issue that you have.

imageObj.onload = function() {
    layer.draw();
};

Upvotes: 2

Related Questions