Question

我稍微修改了你的小提琴link。我想要做的是不要在开始时加载两个图像 - 只是第一个。

然后当用户点击加载的房子时 - 我想在此时加载第二个房子。

我试图使用小提琴来模仿这种行为： 1）用户点击图像 2）服务器生成并删除生成的jpg的名称。

为了避免在小提琴中这样做，我刚刚添加了这一行：

var newHouse = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg";

3）当点击原始图像时，此jpg将替换现有的jpg。

出于某种原因，这段代码没有这样做：

var newImage = new Image();
newImage.onload = function () {
    var image = new Kinetic.Image({
        id: i,
        image: newImage,
        x: 0,
        y: 0,
        width: 205,
        height: 205,
        name: 'image',
        stroke: 'red',
        strokeWidth: 2,
        strokeEnabled: false
    });
};
newImage.src = newHouse;
// keep the Kinetic.Image object
// but replace its image
ImageObject.setImage(newImage);

非常感谢您的帮助！

Answer 1

从您的服务器加载新图片＆amp;用它来替换现有的图像对象的图像

关键是要等到新图像（house3）完全加载后再尝试进行交换。

    function swap(){

        // get the image object from the selected group
        var ImageObjects = group.get("Image");
        var ImageObject=ImageObjects.toArray()[0];

        // load a second image 
        var house3=new Image();
        house3.onload=function(){

            // now we know the second image has been downloaded

            // keep the Kinetic.Image object
            // but replace its image
            ImageObject.setImage(house3);

            layer.draw();
        }
        house3.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg";
    }

这是代码和小提琴：http://jsfiddle.net/m1erickson/wsCfv/2/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var group=new Kinetic.Group({width:205,height:205});
    layer.add(group);

    var house1=new Image();
    house1.onload=function(){
        start();
    }
    house1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg";


    var image;
    var rect;
    var currentImageIndex;

    function start(){

        image=new Kinetic.Image({
            image:house1,
            x:0,
            y:0,
            width:204,
            height:204,
        });
        group.add(image);
        currentImageIndex=0;

        rect = new Kinetic.Rect({
          x: 0,
          y: 0,
          width: 205,
          height: 205,
          stroke: "blue",
          strokeWidth: 4
        });    
        group.add(rect);

        layer.draw();
        console.log("started");
    }

    function swap(){

        currentImageIndex = (currentImageIndex==0 ? 1 : 0);

        // get the image object from the selected group
        var ImageObjects = group.get("Image");
        var ImageObject=ImageObjects.toArray()[0];

        // load a second image 
        var house3=new Image();
        house3.onload=function(){

            // now we know the second image has been downloaded

            // keep the Kinetic.Image object
            // but replace its image
            ImageObject.setImage(house3);

            layer.draw();
        }
        house3.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg";
    }


    $("#swap").click(function(){ $("#swap").hide();  swap(); });



}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
    <button id="swap">Swap Images</button>
</body>
</html>

Answer 2

您只需重新安排newImage.onload功能：

var newImage = new Image();
newImage.onload = function() {
    // keep the Kinetic.Image object
// but replace its image
ImageObject.setImage(newImage); 
    layer.draw();
};
newImage.src = newHouse;

JSFiddle

替换图像的问题

2 个答案: