在 Konva.js 中是否可以用鼠标左键绘制并用鼠标右键拖动舞台？答案

【问题标题】：Is it possible in Konva.js to draw with the left mouse button and drag the stage with the right mouse button?在 Konva.js 中是否可以用鼠标左键绘制并用鼠标右键拖动舞台？
【发布时间】：2022-01-16 23:02:48
【问题描述】：

我正在尝试制作一个应用程序，您可以在其中绘制自定义矩形对象并能够同时拖动您的舞台。 Konva.js 可以吗？

var stage = new Konva.Stage({ 
    container: 'container', 
    width: width, 
    height: height 
});

document.addEventListener('mousedown', (e) => { 
    switch (e.button) { 
        case 0: 
            stage.draggable(false); 
            break; 
        case 2: 
            stage.draggable(true); 
        break; 
    } 
});

【问题讨论】：

你做过研究吗？请与我们分享您的研究
通常，UI 会为用户提供单击以切换模式的按钮。通常有一个形状调色板可供选择，选择将模式切换为绘图，完成后模式重新设置为拖动。这更像你需要的吗？

标签： javascript konvajs

【解决方案1】：

为了实现你的目标，你可以使用这个：

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
  draggable: true
});

const layer = new Konva.Layer();
stage.add(layer);

const circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 50,
  fill: 'green'
});
layer.add(circle);

layer.draw();

stage.on('contextmenu', e => {
  e.evt.preventDefault();
})

stage.on('mousedown', (e) => {
  const isLeft = e.evt.button === 0;
  stage.draggable(!isLeft); 
});

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Konva demo">
  <script src="https://unpkg.com/konva@^2/konva.min.js"></script>
  <meta charset="utf-8">
</head>
<body>
  <div id="container"></div>
</body>
</html>

【讨论】：

【解决方案2】：

好的，所以如果您想知道如何做到这一点，这是一个可能的解决方案：

var stage = new Konva.Stage({ 
    container: 'container', 
    width: width, 
    height: height 
});

document.addEventListener('mousedown', (e) => { 
    if(e.button === 0) stage.draggable(false); 
});
document.addEventListener('mouseup', (e) => { 
    if(e.button === 0) stage.draggable(true); 
});

【讨论】：

【解决方案3】：

这对我有用：

Konva.dragButtons = [2]

例如，如果您使用的是react-konva：

import Konva from 'konva'

Konva.dragButtons = [2]

【讨论】：