从中心缩放konva图像并在重绘时保持位置

如何解决从中心缩放konva图像并在重绘时保持位置

嘿，我在这里有一个小问题，我有一个运行良好的Konva.js应用程序。我有一个名为SET_STAGE_DATA的函数，该函数应该将图像保存在画布上的当前位置，以便在画布消失时可以重新绘制它。它可以工作，但是当您从左侧缩放图像时，图像会移动。我不确定如何解决此问题。我以为我可以用偏移来修复它，但无济于事。

这里有我的SET_STAGE_DATA函数

  [SET_STAGE_DATA](state){
    const isstage = state.stage;
    if(isstage){
    const groups = state.stage.find("Group");
    const stageData = [];
    for (let x = 0; x < groups.length; x++) {
      let g = groups[x];;
      let i = g.findOne("Image").getAttrs();
      let position = g.findOne("Image").position();
      console.log("this is position",position);
      let group = { x: g.getX(),y: g.getY() };
      let image = { x: i.width,y: i.height,position };
      let obj = { image,group };
      stageData.push(obj);
    }

我在像这样构建图像之前就使用了stageData

  let groupPos; 
    let imagePos;
    if(state.stageData){
      console.log(true);
      for(let i =0; i<state.stageData.length; i++){
      imageObj.width = state.stageData[i].image.x;
      imageObj.height = state.stageData[i].image.y;
     imagePos = state.stageData[i].position;
      groupPos = state.stageData[i].group;
      }
    } else {
      groupPos = {
        x: state.stage.width() / 2 - imageObj.width / 2,y: state.stage.height() / 2 - imageObj.height / 2
      };
    }
    console.log("data",{groupPos,image: {width: imageObj.width,height: imageObj.height}});
    const image = new Konva.Image({
      image: imageObj,width: imageObj.width,height: imageObj.height,strokeWidth: 10,stroke: "blue",strokeEnabled: false
    });
    if(imagePos){
    image.position(imagePos)
    }
    const group = new Konva.Group({
      draggable: true,x: groupPos.x,y: groupPos.y
    });

我在文档中也具有典型的更新功能：

  function update(activeAnchor) {
      const group = activeAnchor.getParent();

      let topLeft = group.get(".topLeft")[0];
      let topRight = group.get(".topRight")[0];
      let bottomright = group.get(".bottomright")[0];
      let bottomLeft = group.get(".bottomLeft")[0];
      let image = group.get("Image")[0];

      let anchorX = activeAnchor.getX();
      let anchorY = activeAnchor.getY();

      // update anchor positions
      switch (activeAnchor.getName()) {
        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.position(topLeft.position());
      let width = topRight.getX() - topLeft.getX();
      let height = bottomLeft.getY() - topLeft.getY();
      if (width && height) {
        image.width(width);
        image.height(height);
      }
    }
    function addAnchor(group,x,y,name) {
      let anchor = new Konva.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);
        state.layer.draw();
      });
      anchor.on("mousedown touchstart",function() {
        group.draggable(false);
        this.movetoTop();
      });
      anchor.on("dragend",function(evt) {
        group.draggable(true);
        commit(SET_STAGE_DATA);
        dispatch(UPDATE_ANIMATION,state.selectednode);
        state.layer.draw();
      });
      // add hover styling
      anchor.on("mouSEOver",function() {
        document.body.style.cursor = "pointer";
        this.strokeWidth(4);
        state.layer.draw();
      });
      anchor.on("mouSEOut",function() {
        document.body.style.cursor = "default";
        this.strokeWidth(2);
        state.layer.draw();
      });

      group.add(anchor);
    }
    state.layer.draw();
  },

当我向左缩放时，图像在重绘时超出锚点。我知道只要不通过image.position(topLeft.position());重画图像就可以通过视觉方式解决此问题，因为您看到的已注释掉，但是如果您从左侧拖动，它总是好像未设置位置。如果我从右下角缩放，一切都很好。它的作用好像回到了图像左上角的先前位置，但据我所知，使用stage.find（）将为您提供当前阶段。我完全不知所措。 在图像中查看它如何不留在盒子中。任何帮助都将非常感谢。 [1]：https://i.stack.imgur.com/HEfHP.jpg

解决方法

更新SET_STAGE_DATA函数以使其看起来像这样

 [SET_STAGE_DATA](state){
    const isStage = state.stage;
    const isEditorMode = state.editorMode;
    if(isStage && !isEditorMode){
    const groups = state.stage.find("Group");
    const stageData = [];
    for (let x = 0; x < groups.length; x++) {
      let g = groups[x];
      let i = g.findOne("Image").getAttrs();
      let group = {x: g.getX() + i.x,y: g.getY() + i.y };
      let image = i;
      let obj = { image,group };
      stageData.push(obj);
    }
    state.stageData = stageData;
  } else {
    state.stageData = null;
  }
  }

group.x和y不会按比例更新，而image.x和y会按比例更新。在移动图像x和y为0时，如果将它们添加到group.x和y中，则会将锚点放置在需要的位置。