小编dyn*_*dle的帖子

Konva.js:[自由绘图和拖动和缩放]拖动或缩放后无法用指针正确绘图

欢迎任何讨论。谢谢阅读!

我正在尝试做什么

我正在尝试使用 Konva.js 实现简单的纸张(白板)。

到目前为止,我已经在纸上实现了拖动、缩放和自由绘图。

我提到

  1. https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html用于缩放
  2. https://konvajs.org/docs/sandbox/Free_Drawing.html免费绘图

我只想在米色背景的区域上绘制,并且我想精确地在指针下方绘制,即使它被缩放或拖动。

但自由绘图以及拖动和缩放功能不能很好地协同工作。

漏洞

拖动或缩放后无法正确绘制。

我认为发生了错误的事情,但无法修复

我认为以下两部分有问题。

  1. 缩放的实现
  2. 我如何在绘图实现中使用stage.getPointerPosition()
  3. 或者这两个的实现不适合在一起

代码

最低代码在这里。

/* ---- Mode management ---- */
let modeSelector = document.getElementById('mode-selector');
let mode = modeSelector.value;
modeSelector.addEventListener('change', () => {
  // Discaed event handlers used by old mode
  switch (mode) {
    case 'Hand': {
      endHand();
      break;
    }
    case 'Pen': {
      endPen();
      break;
    }
  }

  // Set event handlers for new mode
  mode = modeSelector.value;
  switch (mode) { …
Run Code Online (Sandbox Code Playgroud)

javascript konvajs

5
推荐指数
1
解决办法
3938
查看次数

标签 统计

javascript ×1

konvajs ×1