Remplacement de l'image dans la toile HTML5 en utilisant kinetic.js?

StackOverflow https://stackoverflow.com/questions/9411507

Question

Hé les gars, j'essaie de remplacer l'image chargée sur la toile HTML5 en cliquant sur l'image suivante dans la même liste. Comme j'ai deux listes d'images utilisant différentes fonctions pour accéder à la toile .. maintenant ce que je veux, c'est Remplacez la première photo téléchargée en cliquant sur l'image suivante.

             <script src="kinetic-v1.js">
             </script>
            <script>
            function drawImage(imageObj){
             var stage = new Kinetic.Stage("container", 578, 500);
             var layer = new Kinetic.Layer();
             var x = stage.width / 2 - 200 / 2;
             var y = stage.height / 2 - 137 / 2;
             var width = 200;
             var height = 137;

            // darth vader
              var darthVaderImg = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();
            });

            // enable drag and drop
               darthVaderImg.draggable(true);

            // add cursor styling
               darthVaderImg.on("mouseover", function(){
               document.body.style.cursor = "pointer";
            });
            darthVaderImg.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
            //remove image on double click
              darthVaderImg.on("dblclick dbltap", function(){
              layer.remove(darthVaderImg);


              layer.draw();
                });
              layer.add(darthVaderImg);
              stage.add(layer);
        }
         function drawImage2(imageObj){
            var stage = new Kinetic.Stage("container", 578, 500);
         var layer = new Kinetic.Layer();
            var x = stage.width / 2 - 100 ;
            var y = stage.height / 2 - 137 ;
            var width = 200;
            var height = 137;

            // darth vader
            var darthVaderImg2 = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();
            });

            // enable drag and drop
            darthVaderImg2.draggable(true);

            // add cursor styling
            darthVaderImg2.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            darthVaderImg2.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
            //remove image on double click
            darthVaderImg2.on("dblclick dbltap", function(){
            layer.remove(darthVaderImg2);


            layer.draw();
                });
            layer.add(darthVaderImg2);
            stage.add(layer);
            }

           function load(img){

            // load image
            var imageObj = new Image();
            imageObj.onload = function(){
                drawImage(this);

            };
            imageObj.src = img.src;
            };
              function load2(img){
               // load image
               var imageObj = new Image();
               imageObj.onload = function(){
                drawImage2(this);
             };
              imageObj.src = img.src;
            };
             </script>
             <title>HTMl5 drag drop multiple elements</title></head>
              <body onmousedown="return false;">
              <div id="container">
             </div>
            <ul id="img"> <li><a href="#" onclick="load(document.getElementById('i1'))">
    <img src="dog.png" id="i1" alt="doggie" width="60" height="55"/>
    </a></li>
    <li>
        <a href="#" onclick="load(document.getElementById('i2'))">
        <img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55" /></a>
    </li>
    </ul>
    <ul id="img1">
        <li><a href="#" onclick="load2(document.getElementById('i4'))">
            <img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
            </a></li>
            <li><a href="#" onclick="load2(document.getElementById('i5'))">
            <img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
            </ul>
            </body>
            </html>

Pas de solution correcte

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top