Question

请帮帮我。我通过kinetic-v5.0.1.min.js创建了draw image 2 image。但我无法点击按钮然后移动ToTop。

码

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container{
        border: 1px solid gray;
        width: 80%;
      }
    </style>
  </head>
  <body onmousedown="return false;">
    <center>
        <button id="toTop">
            Move yellow box to top
        </button>
        <div id="container">

        </div>
    </center>
    <script src="kinetic-v5.0.1.min.js"></script>
    <script>
        var click_totop = null;
      function update(activeAnchor) {
        var group = activeAnchor.getParent();

        var topLeft = group.find('.topLeft')[0];
        var topRight = group.find('.topRight')[0];
        var bottomRight = group.find('.bottomRight')[0];
        var bottomLeft = group.find('.bottomLeft')[0];
        var image = group.find('.image')[0];

        var anchorX = activeAnchor.x();
        var anchorY = activeAnchor.y();

        // update anchor positions
        switch (activeAnchor.name()) {
          case 'topLeft':
            topRight.y(anchorY);
            bottomLeft.x(anchorX);
            break;
          case 'topRight':
            topLeft.y(anchorY);
            bottomRight.x(anchorX);
            break;
          case 'bottomRight':
            bottomLeft.y(anchorY);
            topRight.x(anchorX); 
            break;
          case 'bottomLeft':
            bottomRight.y(anchorY);
            topLeft.x(anchorX); 
            break;
        }

        image.setPosition(topLeft.getPosition());

        var width = topRight.x() - topLeft.x();
        var height = bottomLeft.y() - topLeft.y();
        if(width && height) {
          image.setSize({width:width, height: height});
        }
      }
      function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();
        var toptop = null;

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

        anchor.on('dragmove', function() {
          update(this);
          layer.draw();
        });
        anchor.on('mousedown touchstart', function() {
          group.setDraggable(false);
          this.moveToTop();
        });
        anchor.on('dragend', function() {
          group.setDraggable(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.strokeWidth(2);
          layer.draw();
        });

        // test 
        toptop = anchor;

        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: 469,
          height: 637
        });
        var darthVaderGroup = new Kinetic.Group({
          x: 2,
          y: 2,
          draggable: true
        });
        var yodaGroup = new Kinetic.Group({
          x: 2,
          y: 2,
          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
         */
         click_totop = darthVaderGroup;
        layer.add(darthVaderGroup);
        layer.add(yodaGroup);
        stage.add(layer);

        // darth vader
        var darthVaderImg = new Kinetic.Image({
          x: 0,
          y: 0,
          image: images.darthVader,
          width: 469,
          height: 637,
          name: 'image'
        });

        darthVaderGroup.add(darthVaderImg);
        addAnchor(darthVaderGroup, 0, 0, 'topLeft');
        addAnchor(darthVaderGroup, 469, 0, 'topRight');
        addAnchor(darthVaderGroup, 469, 637, 'bottomRight');
        addAnchor(darthVaderGroup, 0, 637, 'bottomLeft');

        darthVaderGroup.on('click', function() {
          this.moveToTop();
        });
        // yoda
        var yodaImg = new Kinetic.Image({
          x: 0,
          y: 0,
          image: images.yoda,
          width: 469,
          height: 637,
          name: 'image'
        });

        yodaGroup.add(yodaImg);
        addAnchor(yodaGroup, 0, 0, 'topLeft');
        addAnchor(yodaGroup, 469, 0, 'topRight');
        addAnchor(yodaGroup, 469, 637, 'bottomRight');
        addAnchor(yodaGroup, 0, 637, 'bottomLeft');

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

        stage.draw();
      }

      var sources = {
        darthVader: 'user.jpg'
        ,yoda: 'cover.png'
      };
      loadImages(sources, initStage);

      document.getElementById("toTop").addEventListener("click", function() {
            alert(click_totop);
            click_totop.moveToTop();
            layer.draw();
            }, false);
    </script>

  </body>
</html>

我使用2张图片。然后我点击button1 image 1 moveToTop，如果我点击button2 image 2 moveToTop。请帮帮我。

我通过kinetic创建绘制图像2图像但我不能单击按钮然后moveToTop（）

0 个答案: