Question

在我的KonvaJS项目中，我将图像（又称“贴纸”）添加到上传的图像上，并且使用KonvaJS，我添加了“锚点”以旋转和调整图像大小。

当鼠标离开主图像时（或者也许当您单击标签时，它会切换编辑模式吗？），我想删除锚点和线条。

这怎么可能？

function centreRectShape(shape) {
  shape.x((stage.getWidth() - shape.getWidth()) / 2);
  shape.y((stage.getHeight() - shape.getHeight()) / 2);
}

var stage = new Konva.Stage({
  container: 'canvas-container',
  width: 650,
  height: 300
});

var layer = new Konva.Layer();
stage.add(layer);

var bgRect = new Konva.Rect({
  width: stage.getWidth(),
  height: stage.getHeight(),
  fill: 'gold',
  opacity: 0.1
});
layer.add(bgRect);

var uploadedImage = new Konva.Image({
  draggable: false
});

layer.add(uploadedImage);

imgObj = new Image();

imgObj.onload = function() {

  uploadedImage.image(imgObj);

  var padding = 20;
  var w = imgObj.width;
  var h = imgObj.height;

  var targetW = stage.getWidth() - (2 * padding);
  var targetH = stage.getHeight() - (2 * padding);

  var widthFit = targetW / w;
  var heightFit = targetH / h;
  var scale = (widthFit > heightFit) ? heightFit : widthFit;

  w = parseInt(w * scale, 10);
  h = parseInt(h * scale, 10);

  uploadedImage.size({
    width: w,
    height: h
  });
  centreRectShape(uploadedImage);
  layer.draw();
}

imgObj.src = 'https://images.pexels.com/photos/787961/pexels-photo-787961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';

$('.sticker').on('click', function() {
  addSticker($(this).attr('src'));
});

function addSticker(imgUrl) {
  stickerObj = new Konva.Image({
    x: 240,
    y: 20,
    width: 93,
    height: 104,
    draggable: true
  });
  layer.add(stickerObj);
  var stickerImage = new Image();
  stickerImage.onload = function() {
    stickerObj.image(stickerImage);
    layer.draw();
  };
  stickerImage.src = imgUrl;
  var imgRotator = new Konva.Transformer({
    node: stickerObj,
    keepRatio: true,
    enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
  });
  layer.add(imgRotator);
}

html,
* {
  margin: 0;
  padding: 0;
}

body {
  background: #eee;
}

#image-editor {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d8d8d8;
  width: 650px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
}

.stickers {
  padding: 10px 5px;
  background: #eee;
}

.stickers>img {
  margin-right: 10px;
}

<script src="https://unpkg.com/konva@2.4.1/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-editor">
  <div id="canvas-container"></div>
  <div class="stickers">
    <div>
      click sticer below and then rotate
    </div>
    <img class="sticker" src="https://craftblock.me/koa/fb-upload-clone/stickers/sticker%20(1).png" alt="Sticker" width="62px">

  </div>
</div>

Answer 1

最简单的方法是将addSticker()和mouseover的函数事件处理程序添加到mouseout中。您可以附加它们，例如。例如stage对象。

stage.on('mouseover', function() {
  imgRotator.attachTo(stickerObj);
  layer.draw();
});

stage.on('mouseout', function() {
  imgRotator.detach();
  layer.draw();
});

他们做两件事：

将Transformer对象与选定节点连接/分离。
刷新图层。

从这里开始，您可以对其进行改进。您可以使addSticker()函数返回带有attachTo和detach方法的对象，以便能够从其他地方调用它们。像这样：

function addSticker(imgUrl) {
  ...
  return {
    showTransformer: function() {
      imgRotator.attachTo(stickerObj);
      layer.draw();
    },
    hideTransformer: function() {
      imgRotator.detach();
      layer.draw();
    }
  };
}

此外，如果您打算拥有多个标签，则应实现一些逻辑以跟踪事件应应用于哪个标签。

编辑：

您对此答案发表了两条评论：

“ 我认为最好将mouseout用于该特定标签。”

用于调整大小和旋转图像的锚点实际上位于图像的外侧。如果您在mouseout事件之后将它们隐藏起来...那么，您的用户将永远无法访问它们；）

您有两种选择可以避免这种情况：

创建一个包含锚点的custom hit region。
使用click替换事件以切换转换器对象。

我在更新的代码段中使用了第二种方法。

“ 如果添加了多个标签怎么办？”

您应该使用闭包将对不同对象的引用保留在该函数范围内。

结合click进行切换和关闭：

stickerObj.on('click', (function(transformer, sticker) {
  return function() {
    transformer.getNode() ? transformer.detach() : transformer.attachTo(sticker);
    layer.draw();
  };
})(imgRotator, stickerObj));

其他提示：

即使在拆下变压器之后，用户仍然可以在图像周围移动。这是因为draggable是图像的属性（继承自node），而不是转换器的属性。因此，也许您也想切换node.draggable(boolean);。

如果由于某些原因您不想拆卸/连接变压器，则可以在切换borderEnabled()，resizeEnabled()和rotateEnabled()时获得类似的效果。

function centreRectShape(shape) {
  shape.x((stage.getWidth() - shape.getWidth()) / 2);
  shape.y((stage.getHeight() - shape.getHeight()) / 2);
}

var stage = new Konva.Stage({
  container: 'canvas-container',
  width: 650,
  height: 300
});

var layer = new Konva.Layer();
stage.add(layer);

var bgRect = new Konva.Rect({
  width: stage.getWidth(),
  height: stage.getHeight(),
  fill: 'gold',
  opacity: 0.1
});
layer.add(bgRect);

var uploadedImage = new Konva.Image({
  draggable: false
});

layer.add(uploadedImage);

imgObj = new Image();

imgObj.onload = function() {

  uploadedImage.image(imgObj);

  var padding = 20;
  var w = imgObj.width;
  var h = imgObj.height;

  var targetW = stage.getWidth() - (2 * padding);
  var targetH = stage.getHeight() - (2 * padding);

  var widthFit = targetW / w;
  var heightFit = targetH / h;
  var scale = (widthFit > heightFit) ? heightFit : widthFit;

  w = parseInt(w * scale, 10);
  h = parseInt(h * scale, 10);

  uploadedImage.size({
    width: w,
    height: h
  });
  centreRectShape(uploadedImage);
  layer.draw();
}

imgObj.src = 'https://images.pexels.com/photos/787961/pexels-photo-787961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';

$('.sticker').on('click', function() {
  addSticker($(this).attr('src'));
});

function addSticker(imgUrl) {
  stickerObj = new Konva.Image({
    x: 240,
    y: 20,
    width: 93,
    height: 104,
    draggable: true
  });
  layer.add(stickerObj);
  var stickerImage = new Image();
  stickerImage.onload = function() {
    stickerObj.image(stickerImage);
    layer.draw();
  };
  stickerImage.src = imgUrl;
  var imgRotator = new Konva.Transformer({
    node: stickerObj,
    keepRatio: true,
    enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
  });
  layer.add(imgRotator);
  
  stickerObj.on('click', (function(transformer, sticker) {
    return function() {
      transformer.getNode() ? transformer.detach() : transformer.attachTo(sticker);
      layer.draw();
    };
  })(imgRotator, stickerObj));
}

html,
* {
  margin: 0;
  padding: 0;
}

body {
  background: #eee;
}

#image-editor {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d8d8d8;
  width: 650px;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
}

.stickers { pitón reticulada 
  padding: 10px 5px;
  background: #eee;
}

.stickers>img {
  margin-right: 10px;
}

<script src="https://unpkg.com/konva@2.4.1/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-editor">
  <div id="canvas-container"></div>
  <div class="stickers">
    <div>
      click sticer below and then rotate
    </div>
    <img class="sticker" src="https://craftblock.me/koa/fb-upload-clone/stickers/sticker%20(1).png" alt="Sticker" width="62px">

  </div>
</div>

KonvaJS-鼠标悬停/鼠标移开图像时切换锚点

1 个答案:

编辑：

其他提示：