Question

如何更改在另一张纸上删除的属性名称？

这是我的标记和代码：

<!DOCTYPE html>
    <html>
        <head>`enter code here`
            <link href="css/joint.min.css" rel="stylesheet" type="text/css"/>
            <link href="css/joint.css" rel="stylesheet" type="text/css"/>
            <script src="js/jquery.js" type="text/javascript"></script>
            <script src="js/lodash.js" type="text/javascript"></script>
            <script src="js/backbone.js" type="text/javascript"></script>
            <script src="js/joint.js" type="text/javascript"></script>
            <script src="js/joint.min.js" type="text/javascript"></script>
            <script src="js/circle-constraint.js" type="text/javascript"></script>
            <link href="css/cascadeTest.css" rel="stylesheet" type="text/css"/>
            <script src="js/inspector.js" type="text/javascript"></script>
        </head>
        <body>
    <div id="stencil"></div>
    <div id="paper"></div>
    <div class="inspector-container"></div>
    <script>
        // Canvas where sape are dropped
        var graph = new joint.dia.Graph;
          paper = new joint.dia.Paper({
            el: $('#paper'),
            model: graph
          });

        // Canvas from which you take shapes
        var stencilGraph = new joint.dia.Graph;
          stencilPaper = new joint.dia.Paper({
            el: $('#stencil'),
            height: 60,
            model: stencilGraph,
            interactive: false
          });

        var r1 = new joint.shapes.basic.Rect({
          position: {
            x: 10,
            y: 10
          },
          size: {
            width: 100,
            height: 40
          },
          attrs: {
            text: {
              text: 'Rect1'
            }
          }
        });
        var r2 = new joint.shapes.basic.Rect({
          position: {
            x: 120,
            y: 10
          },
          size: {
            width: 100,
            height: 40
          },
          attrs: {
            text: {
              text: 'Rect2'
            }
          }
        });

        var erd = joint.shapes.erd;
                erd.ISA.prototype.getHighlighterPath = function (w, h) {

                    return ['M', -8, 1, w + 8, 1, w / 2, h + 2, 'z'].join(' ');
                };
                var isa = new erd.ISA({
                    position: {x: 400, y: 10},
                    attrs: {
                        text: {
                            text: 'ISA',
                            fill: '#ffffff',
                            'letter-spacing': 0,
                            style: {'text-shadow': '1px 0 1px #333333'}
                        },
                        polygon: {
                            fill: '#fdb664',
                            stroke: 'none',
                            filter: {name: 'dropShadow', args: {dx: 0, dy: 2, blur: 1, color: '#333333'}}
                        }
                    }
                });

                var earth = new joint.shapes.basic.Circle({
                    position: {x: 250, y: 10},
                    size: {width: 100, height: 40},
                    attrs: {text: {text: 'circle'}, circle: {fill: '#2ECC71'}},
                    name: 'earth'
                });

                 var image = new joint.shapes.basic.Image({
                    position: {
                        x: 500,
                        y: 10
                    },
                    size: {

                        width: 80,
                        height: 40
                    },
                    attrs: {
                        image: {
                            "xlink:href": "download.jpg",
                            width: 80,
                            height: 40

                        }
                    }
                });
        stencilGraph.addCells([r1, r2, earth, isa, image]);

        stencilPaper.on('cell:pointerdown', function(cellView, e, x, y) {
          $('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
          var flyGraph = new joint.dia.Graph,
            flyPaper = new joint.dia.Paper({
              el: $('#flyPaper'),
              model: flyGraph,
              interactive: false
            }),
            flyShape = cellView.model.clone(),
            pos = cellView.model.position(),
            offset = {
              x: x - pos.x,
              y: y - pos.y
            };

          flyShape.position(0, 0);
          flyGraph.addCell(flyShape);
          $("#flyPaper").offset({
            left: e.pageX - offset.x,
            top: e.pageY - offset.y
          });
          $('body').on('mousemove.fly', function(e) {
            $("#flyPaper").offset({
              left: e.pageX - offset.x,
              top: e.pageY - offset.y
            });
          });
          $('body').on('mouseup.fly', function(e) {
            var x = e.pageX,
              y = e.pageY,
              target = paper.$el.offset();

            // Dropped over paper ?
            if (x > target.left && x < target.left + paper.$el.width() && y > target.top && y < target.top + paper.$el.height()) {
              var s = flyShape.clone();
              s.position(x - target.left - offset.x, y - target.top - offset.y);
              graph.addCell(s);
            }
            $('body').off('mousemove.fly').off('mouseup.fly');
            flyShape.remove();
            $('#flyPaper').remove();
          });
        });
    </script>
    </body>

    </html>

Answer 1

一旦元素被删除，你就可以了

graph.addCell(s);
s.attr('attributeName/text',newValue)

假设新属性具有属性文本。

如何更改在另一张纸上删除的属性名称

1 个答案: