1

我在这里遇到问题...我想将画布图像更改为另一个图像...但是我在这样做时遇到了问题...

这是代码...

<!DOCTYPE HTML>
<html>
  <head>
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" />
    <script src="js/jquery-1.6.4.min.js"></script>
    <script src="js/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript">
    function myFunction()
    {

    $("#container").empty();
    }
</script>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
        width: 100%;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.7.js"></script>
    <script>
      function update(group, activeAnchor) {
        var topLeft = group.get(".topLeft")[0];
        var topRight = group.get(".topRight")[0];
        var bottomRight = group.get(".bottomRight")[0];
        var bottomLeft = group.get(".bottomLeft")[0];
        var image = group.get(".image")[0];

        // update anchor positions
        switch (activeAnchor.getName()) {
          case "topLeft":
            topRight.attrs.y = activeAnchor.attrs.y;
            bottomLeft.attrs.x = activeAnchor.attrs.x;
            break;
          case "topRight":
            topLeft.attrs.y = activeAnchor.attrs.y;
            bottomRight.attrs.x = activeAnchor.attrs.x;
            break;
          case "bottomRight":
            bottomLeft.attrs.y = activeAnchor.attrs.y;
            topRight.attrs.x = activeAnchor.attrs.x;
            break;
          case "bottomLeft":
            bottomRight.attrs.y = activeAnchor.attrs.y;
            topLeft.attrs.x = activeAnchor.attrs.x;
            break;
        }

        image.setPosition(topLeft.attrs.x, topLeft.attrs.y);
        image.setSize(topRight.attrs.x - topLeft.attrs.x, bottomLeft.attrs.y - topLeft.attrs.y);
      }
      function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Kinetic.Circle({
          x: x,
          y: y,
          stroke: "#666",
          fill: "#ddd",
          strokeWidth: 2,
          radius: 8,
          name: name,
          draggable: true
        });

        anchor.on("dragmove", function() {
          update(group, this);
          layer.draw();
        });
        anchor.on("mousedown touchstart", function() {
          group.draggable(false);
          this.moveToTop();
        });
        anchor.on("dragend", function() {
          group.draggable(true);
          layer.draw();
        });
        // add hover styling
        anchor.on("mouseover", function() {
          var layer = this.getLayer();
          document.body.style.cursor = "pointer";
          this.setStrokeWidth(4);
          layer.draw();
        });
        anchor.on("mouseout", function() {
          var layer = this.getLayer();
          document.body.style.cursor = "default";
          this.setStrokeWidth(2);
          layer.draw();
        });

        group.add(anchor);
      }
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }

      function initStage(images) {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 1153,
          height: 385
        });
        var CarGroup = new Kinetic.Group({

          draggable: false
        });
        var darthVaderGroup = new Kinetic.Group({
          x: 210,
          y: 100,
          draggable: true
        });
        var yodaGroup = new Kinetic.Group({
          x: 100,
          y: 110,
          draggable: true
        });

        var layer = new Kinetic.Layer();

        /*
         * go ahead and add the groups
         * to the layer and the layer to the
         * stage so that the groups have knowledge
         * of its layer and stage
         */
        layer.add(CarGroup);
        layer.add(darthVaderGroup);
        layer.add(yodaGroup);
        stage.add(layer);
        stage.setScale("window.innerWidth")

        // darth vader
        var darthVaderImg = new Kinetic.Image({
          x: 720,
          y: 140,
          image: images.darthVader,
          width: 115,
          height: 124,
          name: "image"
        });

        darthVaderGroup.add(darthVaderImg);
        addAnchor(darthVaderGroup, 720, 140, "topLeft");
        addAnchor(darthVaderGroup, 840, 140, "topRight");
        addAnchor(darthVaderGroup, 840, 270, "bottomRight");
        addAnchor(darthVaderGroup, 720, 270, "bottomLeft");

        darthVaderGroup.on("dragstart", function() {
          this.moveToTop();
        });

        // darth vader
        var CarImg = new Kinetic.Image({
          x: 0,
          y: 0,
          image: images.Car,
          width: 1153,
          height: 385,
          name: "image"
        });

        CarGroup.add(CarImg);



        // yoda
        var yodaImg = new Kinetic.Image({
          x: 75,
          y: 120,
          image: images.yoda,
          width: 125,
          height: 134,
          name: "image"
        });

        yodaGroup.add(yodaImg);
        addAnchor(yodaGroup, 70, 120, "topLeft");
        addAnchor(yodaGroup, 200, 120, "topRight");
        addAnchor(yodaGroup, 200, 254, "bottomRight");
        addAnchor(yodaGroup, 70, 254, "bottomLeft");

        yodaGroup.on("dragstart", function() {
          this.moveToTop();
        });

        stage.draw();
      }

      window.onload = function() {
        var sources = {
          darthVader: "Velg1.png",
          yoda: "Velg1.png",
          Car : "coba.jpeg"
        };
        loadImages(sources, initStage);
        /*stage.setScale(5, 6);*/
      };

    </script>

  </head>
  <body onmousedown="return false;">
    <div id="container" ></div>
    <input type="button" onClick="myFunction();">
  </body>
</html>

如您所见...我要更改的图像在

var sources = {
          darthVader: "Velg1.png",
          yoda: "Velg1.png",
          Car : "coba.jpeg"
        };

通过使用单击按钮事件...有人可以帮助我吗？

提前致谢....

4

0 回答 0