1

嘿伙计们，我正在尝试在单击同一列表中的下一个图像时替换加载在 html5 画布上的图像。就像我有两个使用不同功能的图像列表进入画布一样。现在我想要的是点击下一张图片替换第一张上传的图片..其他列表也是如此..请帮帮我谢谢..

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

1 回答 1

0

在这里..我刚刚更新了 kineticJs 库并使用了一个额外的标签 .. 由朋友 berry 提供

       <script src="kinetic-v3.8.0.min.js">
       </script>
       <script>
        var stage = null;
        var groups = {
            dog: null,
            bla: null
        }

        function setupStage() {
            stage = new Kinetic.Stage("container", 578, 500);
        };

        function drawImageOnLayer(layer, img) {
            var x = stage.width / 2 - 100 ;
            var y = stage.height / 2 - 137 ;
            var width = 200;
            var height = 137;

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

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

            layer.clear();
            layer.add(kinecticImg);
            layer.draw();
        }
         function drawImageOnLayer2(layer, img) {
            var x = stage.width / 2 - 300 ;
            var y = stage.height / 2 - 237 ;
            var width = 200;
            var height = 137;

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

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

            layer.clear();
            layer.add(kinecticImg);
            layer.draw();
        }

        function loadWithType(type, img) {
            if (groups[type]) {
                stage.remove(groups[type]);
            } 
            groups[type] = new Kinetic.Layer();
            stage.add(groups[type]);

            drawImageOnLayer(groups[type], img);
        };
        function loadWithType2(type, img) {
            if (groups[type]) {
                stage.remove(groups[type]);
            } 
            groups[type] = new Kinetic.Layer();
            stage.add(groups[type]);

            drawImageOnLayer2(groups[type], img);
        };
          </script>
          <title>HTMl5 drag drop multiple elements</title></head>
           <body onload="setupStage();" onmousedown="return false;">
           <div id="container">
           </div>

      <ul id="img"> <li><a href="#"onclick="loadWithType 
        ('dog',document.getElementById('i1'))">
    <img src="dog.png" id="i1" alt="doggie" width="60" height="55"/>
    </a></li>
    <li>
        <a href="#" onclick="loadWithType('dog', 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="loadWithType2('bla', document.getElementById('i4'))">
    <img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
    </a></li>
   <li><a href="#" onclick="loadWithType2('bla', document.getElementById('i5'))">
    <img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
   </ul>
   </body>
于 2012-02-29T08:19:23.460 回答