为什么形状调用函数draggable()时浏览器会报错？

Question

我想在选择形状时使形状可拖动，在未选择时使形状不可拖动 为什么浏览器报告draggable不是一个函数？

实例初始化后，它是不可拖动的

draw(Map, points) {
        var poly = new Konva.Line({
            // points: [10,10,100,0,100,100,0,100],
            points: points,
            stroke: 'blue',
            strokeWidth: 5,
            closed: true,
            // draggable: true,
            name: 'polygon'
        });
        poly.draggable(false)
        Map.stage.findOne("#draw").add(poly)
        Map.stage.findOne("#tr").nodes([poly])

        if(points.length == 2){
            var imageObj = new Image();
            imageObj.onload = function() {
                var yoda = new Konva.Image({
                    x: points[0]-20,
                    y: points[1]-20,
                    image: imageObj,
                    width: 20,
                    height: 20,
                    name:'finishBtn'
                });
            
                // add the shape to the layer
                Map.stage.findOne("#draw").add(yoda);
            };
            imageObj.src = '/src/assets/drawmap/ok.png';
        }

        return poly
    }

当点击我想要使形状可拖动的形状时，节点#tr是一个变压器，通过函数nodes()获取选定的形状，我尝试不使用变压器，直接使用stage.getChildren()来获取形状并调用draggable()但也失败了

Map.stage.on('click tap', function(e) {
            // if we are selecting with rect, do nothing
            if (this.findOne('#selectionRectangle').visible()) {
                return;
            }
            if (Map.curTool !== tool.pick) {
                return;
            }

            // if click on empty area - remove all selections
            // console.warn('单击事件是否在舞台', e.target === this)
            if (e.target === this) {
                this.findOne("#tr").nodes([]);
                return;
            }

            // do nothing if clicked NOT on our rectangles
            if (!e.target.hasName('rect') && !e.target.hasName('polygon') && !e.target.hasName('image')) {
                return;
            }

            // do we pressed shift or ctrl?
            const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
            const isSelected = this.findOne("#tr").nodes().indexOf(e.target) >= 0;

            if (!metaPressed && !isSelected) {
                // if no key pressed and the node is not selected
                // select just one
                this.findOne("#tr").nodes([e.target]);
            } else if (metaPressed && isSelected) {
                // if we pressed keys and node was selected
                // we need to remove it from selection:
                const nodes = this.findOne("#tr").nodes().slice(); // use slice to have new copy of array
                // remove node from array
                nodes.splice(nodes.indexOf(e.target), 1);
                this.findOne("#tr").nodes(nodes);
            } else if (metaPressed && !isSelected) {
                // add the node into selection
                const nodes = this.findOne("#tr").nodes().concat([e.target]);
                this.findOne("#tr").nodes(nodes);
            }
            
            let nodes = Map.stage.findOne("#draw").findOne("#tr").nodes()
            for(var i of nodes){
                console.log(i.draggable,i.getClassName(),i.getName())
                i.draggable(true);
            }

        });

但浏览器报告draggable不是一个函数

Answer 1

从你的

console.log

我看到

i.draggable

是

true

。但它不应该是布尔值。它应该是一个函数。最有可能的是，您用布尔值覆盖内置函数。

不要这样做：

node.draggable = true;

这样做：

node.draggable(true);