Question

到目前为止，我已使用http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/上的示例作为调整大小功能的基础。然而，在kineticjs（4.3.0+）的新版本中，引入了一个特殊的拖动层。这还需要更新上面的脚本。我已经更新了上面的脚本，结果是下面的脚本。主要区别在于我直接调用拖动的锚点而不是通过组（曾经在同一层上）访问它。该脚本运行良好，但现在有一个延迟。锚点移动得慢，然后图像调整大小。任何人都知道如何解决这个问题？提前谢谢。

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

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

    image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

    var height = bottomLeft.attrs.y - topLeft.attrs.y;
    var width = image.getWidth()*height/image.getHeight();

    topRight.attrs.x = topLeft.attrs.x + width;
    topRight.attrs.y = topLeft.attrs.y;
    bottomRight.attrs.x = topLeft.attrs.x + width;
    bottomRight.attrs.y = topLeft.attrs.y + height;

    if(width && height) {
      image.setSize(width, height);
    }
  }
  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.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.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: 578,
      height: 400
    });

    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(yodaGroup);
    stage.add(layer);

    // darth vader

    // yoda
    var yodaImg = new Kinetic.Rect({
      x: 0,
      y: 0,
      fill: 'blue',
      width: 93,
      height: 104,
      name: "image"
    });

    yodaGroup.add(yodaImg);
    addAnchor(yodaGroup, 0, 0, "topLeft");
    addAnchor(yodaGroup, 93, 0, "topRight");
    addAnchor(yodaGroup, 93, 104, "bottomRight");
    addAnchor(yodaGroup, 0, 104, "bottomLeft");

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

    stage.draw();

  }

$(document).ready(function(){

var sources = {
      darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
      yoda: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"
    };
    loadImages(sources, initStage);

Answer 1

http://jsfiddle.net/fQepn/

我查看了您提供的教程并进行了小改动。看来你的问题与新的拖拽层有关。您必须升级到4.3.1，http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.js，您可以在其中关闭新拖动图层的功能。

只需添加：

  dragOnTop: false

在锚配置里面

  var anchor = new Kinetic.Cir......({x: , y: , ... , dragOnTop: false});

这样可以防止项目被放置在拖动图层中。

Kineticjs在新版本中重新调整问题（4.3.0+）

1 个答案: