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

Question

我正在尝试开发一个应用程序，您可以在其中绘制自定义矩形对象，同时能够拖动您的舞台。 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; 
    } 
});

Answer 1

好的，如果您想知道如何操作，这是一个可能的解决方案：

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); 
});

Answer 2

要实现您的目标，您可以使用：

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>

Answer 3

这对我有用：

Konva.dragButtons = [2]

例如，如果您使用 react-konva:

import Konva from 'konva'

Konva.dragButtons = [2]

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

Is it possible in Konva.js to draw with the left mouse button and drag the stage with the right mouse button?

javascript

konvajs