首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Konvajs:如何改变文本组的位置

Konvajs:如何改变文本组的位置
EN

Stack Overflow用户
提问于 2020-04-01 02:55:01
回答 1查看 831关注 0票数 0

我正在使用Konvajs,我有一组文本,我不想让拖动组在画布之外,我尝试用dragBoundFunc解决这个问题,但是这对我没有帮助,现在我只是尝试在拖放过程中改变组的位置,但是setPosition,setAbsloutePosition,没有什么允许我改变组的位置。

代码语言:javascript
运行
AI代码解释
复制
stage.on('dragmove', (e) => stageOnDragMove(e, layer));
const stageOnDragMove = (e: Konva.KonvaEventObject<any>, layer: Konva.Layer) => {

    const selectionGroup = layer.findOne('#selection-group');
    const transformer = layer.findOne<Konva.Transformer>('Transformer');

    if (selectionGroup?.hasName('text-group')) {
        const pos = selectionGroup.getClientRect({});

        if (pos.x <= 0 || pos.y <= 0) {
            selectionGroup.setAbsolutePosition({
                x: 0,
                y: 0
            });
            layer.draw();
        }
    }

    transformer.attachTo(selectionGroup);
};
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-02 07:40:25

可以使用此函数限制拖放和调整大小功能,以限制其边界:

代码语言:javascript
运行
AI代码解释
复制
shape.on('dragmove transform', () => {
  const box = shape.getClientRect();
  const absPos = shape.getAbsolutePosition();
  const offsetX = box.x - absPos.x;
  const offsetY = box.y - absPos.y;

  const newAbsPos = {...absPos}
  if (box.x < 0) {
    newAbsPos.x = -offsetX;
  }
  if (box.y < 0) {
    newAbsPos.y = -offsetY;
  }
  if (box.x + box.width > stage.width()) {
    newAbsPos.x = stage.width() - box.width - offsetX;
  }
  if (box.y + box.height > stage.height()) {
    newAbsPos.y = stage.height() - box.height - offsetY;
  }
  shape.setAbsolutePosition(newAbsPos)
})

演示:https://jsbin.com/rofupicupu/edit?html,js,output

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60969263

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档