Question

我正在使用go.js制作图表。一切都很好，但现在我想编辑颜色这样的文字。为此，我做了一个textarea。我已经这样做了，但问题是当我更改一个节点的文本时，它会更改我之前选择的其他节点的文本。不知道我哪里错了。这是我的代码：

 var info = document.getElementById("myInfo");
    myDiagram.addDiagramListener("ChangedSelection", function(e1) {
        var sel = e1.diagram.selection;
        var str = "";
        if (sel.count === 0) {
            str = "Selecting nodes in the main Diagram will display information here.";
            info.innerHTML = str;
            return;
        } else if (sel.count > 1) {
            str = sel.count + " objects selected.";
            info.innerHTML = str;
            return;
        }
        // One object selected, display some information
        var elem = sel.first();

        var shape = elem.findObject("SHAPE");
        var txtblock = elem.findObject("TEXT");
        str += "<h3>Selected Node:</h3>";
        str += "<p>Figure: " + shape.figure + "</p>";
        str += "<p>Text: <textarea style='height:100px;' id='nodetext'> " + txtblock.text + "</textarea></p>";
        var strokeColor = shape.stroke;
        str += '<p style="float: left; margin-right: 10px;">Color: <input type="text" id="custom" /></p>';
        info.innerHTML = str;


        $(document).on('keyup','#nodetext',function(a)
        {
            a.preventDefault();
            txtblock.text=$(this).val() ;

        })
        // Initialize color picker
        $("#custom").spectrum({
            color: strokeColor,

            // Change colors by constructing a gradient
            change: function(color) {
                var c = color.toRgb();
                var r, g, b;
                var grad1 = new go.Brush(go.Brush.Linear);
                r = Math.min(c.r + 10, 255);
                g = Math.min(c.g + 10, 255);
                b = Math.min(c.b + 10, 255);
                grad1.addColorStop(0, "rgb(" + r + "," + g + "," + b + ")");
                grad1.addColorStop(0.5, color.toRgbString());
                r = Math.max(c.r - 30, 0);
                g = Math.max(c.g - 30, 0);
                b = Math.max(c.b - 30, 0);
                grad1.addColorStop(1, "rgb(" + r + "," + g + "," + b + ")");
                shape.fill = grad1;
                shape.stroke = "rgb(" + r + "," + g + "," + b + ")";
                txtblock.stroke = (r < 100 && g < 100 && b < 100) ? "white" : "black";
            }
        });

    });

Answer 1

要清楚，您的问题是修改Shape和TextBlock的颜色，而不是尝试修改TextBlock.text属性。

问题是每次Diagram.selection集合更改时，您都会为Spectrum对象添加“更改”事件处理程序。该事件处理程序是一个闭包，它包含对特定选定节点的引用。随着选择的更改，您添加了一个新的事件处理程序，但旧的事件处理程序仍在那里并被调用，修改以前选择的节点。

有几种可能的解决方案。我建议您只定义Spectrum的更改事件处理程序一次，而不是在“ChangedSelection”DiagramEvent侦听器中。将其设置为对图中所有选定节点进行操作的函数，而不是在特定节点上。或者，如果只选择了一个节点，则可能会更改颜色，这就是您想要的策略。

顺便说一句，除非您的链接不可选，否则您的代码应该在用户选择链接时处理该情况。

如何在Go.js

1 个答案: