Joint.js如何使用路径类添加自定义端口到自定义元素中？

Question

我想做的是创建一个带有自定义类用于端口和路径的元素，以便我可以添加具有自定义路径和自己标记的元素。这样，当我创建一个元素时，我将传递动态路径以使其形状就像路径类的元素一样，并且由于我也扩展自PortsModelInterface，我还将拥有自己的端口标记。

整个努力的目的是使svg在缩放时可伸缩。之前我使用带有自定义端口的html自定义元素，但自定义元素的html在缩放时不会缩放。

var graph = new joint.dia.
var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 800,
    height: 600,
    gridSize: 1,
    model: graph,
    snapLinks: true,
    embeddingMode: true
});
joint.shapes.custom1={};
 joint.shapes.custom1.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
        markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>',
        portMarkup: '<g class="port<%= id %>"><circle class="port-body"/></g>',
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            size: { width: 200, height: 110 },
            inPorts: [],
            outPorts: [],
            attrs: {
                '.': { magnet: true},
                rect: {
                    stroke: 'none', 'fill-opacity': 0, width: 300, height: 210,
                },
                circle: {
                    r: 6, //circle radius
                    magnet: true,
          left:0,
                    stroke: 'gray'
                },

                '.inPorts circle': { fill: 'gray', magnet: 'passive', type: 'input', y: 0},
                '.outPorts circle': { fill: 'gray', type: 'output' }
            }
        }, joint.shapes.basic.Generic.prototype.defaults),
        getPortAttrs: function (portName, index, total, selector, type) {

            var attrs = {};
            var portClass = 'port' + index;
            var portSelector = selector + '>.' + portClass;
            var portCircleSelector = portSelector + '>circle';
            attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } };
            attrs[portSelector] = { ref: 'rect', 'ref-x': (index + 1) * (0.55 / total)};
            if (selector === '.outPorts') { 
          attrs[portSelector]['ref-dy'] = 15; 
      }
            return attrs;
        }
    }));
joint.shapes.custom1.Atomic = joint.shapes.custom1.Element.extend({

    markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>',

    defaults: joint.util.deepSupplement({

        type: 'basic.Path',
        size: { width: 60, height: 60 },
        attrs: {
            'path': { fill: '#FFFFFF', stroke: 'black' },
            'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-dy': 20, ref: 'path', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
        }
    }, joint.shapes.basic.Generic.prototype.defaults)

});

var a2 = new joint.shapes.custom1.Atomic({
    position: { x: 50, y: 260 },
    size: { width: 100, height: 100 },
    attrs: {
        path: { d: 'M 30 0 L 60 30 30 60 0 30 z' },
        text: {
            text: 'Diamond',
            'ref-y': .5 // basic.Path text is originally positioned under the element
        }
    },
     inPorts: ['in'],
     outPorts: ['out']
});
graph.addCells([a2])

元素已经在图表中添加，但某些端口未显示。 我对添加类的概念不太了解，希望得到任何帮助将不胜感激。谢谢。 演示例子

- Achilles

---

这与 backbone.js 有什么关系？ - ivarni

Joint.js是基于backbone.js构建的，这个扩展类的整个机制都源自于backbone。我不应该添加这个标签吗？ - Achilles

你能否创建一个fiddle或其他类似的工具，以便我们可以运行代码并查看其失败情况，然后尝试不同的方法来使其正常工作？我不确定你是否能找到会使用joint.js的人，但如果给我们一个机会去尝试，也许我们能够解决问题。 - Guy Schalnat

刚刚制作了一个小示例。链接在帖子中。 - Achilles

这是一个带有自定义端口的自定义元素的工作演示的JSFiddle。 - c.hill

Answer 1

我建议定义一个带有自定义标记的元素，用于形状和端口。这两个标记应该包含一个SVG路径，因此您可以通过model.attr()在它们上设置任意路径数据d。

joint.shapes.devs.GenericModel = joint.shapes.devs.Model.extend({

    markup: '<g class="rotatable"><g class="scalable"><path class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
    portMarkup: '<g class="port port<%= id %>"><path class="port-body"/><text class="port-label"/></g>',

    defaults: joint.util.deepSupplement({
        type: 'devs.GenericModel'
    }, joint.shapes.devs.Model.prototype.defaults)
});

告诉页面使用devs.ModelView进行渲染。

joint.shapes.devs.GenericModelView = joint.shapes.devs.ModelView;

现在您可以随时设置或更改形状和端口的d属性。

var model = new joint.shapes.devs.GenericModel({
    attrs: {
        '.body': { d: 'M 0 0 0 50 50 50 z'},
        '.port-body': { d: 'M 0 0 10 0 10 10 0 10 z'}
    } 
});

model.attr('.body/d', 'M 25 0 50 50 0 50 z');

JS Fiddle: http://jsfiddle.net/kumilingus/kge023bc/

的意思是JS Fiddle是一个在线代码编辑器，可以让开发人员测试和分享他们的前端代码。该链接指向一个名为kge023bc的代码片段，您可以在其中查看和编辑代码，并与其他人共享您的代码。

- Roman

---

这正是我渴望的。谢谢。 - Achilles