Sostituzione dell'immagine in tela HTML5 usando Kinetic.js?

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

Domanda

Ehi ragazzi, sto cercando di sostituire l'immagine caricata sulla tela HTML5 su clic dell'immagine successiva nello stesso elenco .. come se avessi due elenchi di immagini che usano diverse funzioni per salire sulla tela .. ora quello che voglio è Sostituisci la prima foto caricata facendo clic sull'immagine successiva. Lo stesso vale per l'altro elenco .. Per favore aiutami grazie ..

             <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>

Nessuna soluzione corretta

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top