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

要实现目标，可以使用以下方法：

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

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

2 个答案: