JointJS入门实例01-在JOINTJS元素中使用HTML

最新推荐文章于 2024-05-10 17:09:09 发布

原创

最新推荐文章于 2024-05-10 17:09:09 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#JointJS #html #对话框 #删除 #拖拽

1.1 简介

很多时候，您可能希望在JointJS图表中使用HTML输入或其他HTML元素。本实例中使用的技术是创建一个自定义视图，用于呈现HTML并处理与HTML的交互。一种不同的方法可能是使用 foreignObject并将其嵌入markup到您的JointJS元素中。然而，由于浏览器支持不佳，这种技术是有问题的。但是，这似乎是将来在JointJS中将HTML与SVG相结合的正确方法。如果您正确设置自定义HTML视图，则可以利用JointJS提供的许多功能。

1.2 实例

1.2.1 效果图

1.2.2 主要JS代码简介

如何创建一个自定义的JointJS视图来呈现HTML（包括功能输入）。诀窍是更新HTML元素的位置和维度，以便它遵循基本的JointJS元素。另外，我们观察嵌入式输入的变化，并相应更新JointJS模型。这也是相反的，如果模型发生变化，我们会反映HTML中的变化。下面以文件中的htmlInJoint.js的主要代码片段进行简单讲解：

1、新建画布

var graph = new joint.dia.Graph;
    var paper = new joint.dia.Paper({ el: $('#paper-html-elements'), width:700, height: 400, gridSize: 1, model: graph });

2、创建一个自定义html元素

 joint.shapes.html = {};
    joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            attrs: {
                rect: { stroke: 'none', 'fill-opacity': 0 }
            }
        }, joint.shapes.basic.Rect.prototype.defaults)
    });

3、为在页面显示HTML的div元素创建自定义视图

1）创建template

template: [
            '<div class="html-element">',
            '<button class="delete">x</button>',
            '<label></label>',
            '<span></span>', '<b