konva js使对象不可拖动
konva js使对象不可拖动
提问于 2020-07-01 02:30:39
我需要创建一个函数，将对象(圆)的属性从可拖动更改为不可拖动。此外，最好使用鼠标操作，但鼠标用于拖动对象，因此可能需要使用鼠标单击以使其处于活动状态，然后使用按钮更改属性。
这是我用来创建圆的代码，新函数需要更改draggable属性。
function addCircle(){
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
id: [ident],
name: 'test',
});
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
};提前感谢您的帮助。
回答 2
Stack Overflow用户
发布于 2020-07-02 07:00:04
如果要使用鼠标操作切换draggable值，可以执行以下操作：
circle.on('click tap', () => {
circle.draggable(!circle.draggable());
});Stack Overflow用户
发布于 2020-07-05 06:44:26
拉夫顿，谢谢你的意见...我尝试添加您推荐的代码，但得到以下错误
(索引)：35未捕获ReferenceError:未定义圆。
我的圆函数在"konva_library.js“中，所以我认为问题是事件正在寻找一个尚未定义的圆。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Konvajs</title>
<script src='konva_library.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/7.0.0/konva.min.js"></script>
</head>
<body>
<div>
<button onclick="addCircle()">Add Circle</button>
<div id='container'></div>
</div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
// (index):35 Uncaught ReferenceError: circle is not defined
circle.on('dblclick', () => {
circle.draggable(!circle.draggable());
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62663971
复制相关文章
相似问题
腾讯云开发者
