JointJS零基础入门03-元素样式

来源：互联网发布：mac迅雷下载编辑：程序博客网时间：2024/05/16 15:39

3.1 装饰方法

3.1.1 SVG

在JointJS中，只有SVG标准是您可以对元素做什么的限制。对于样式元素，您需要根据其底层SVG DOM子树对元素的结构有一个基本的了解。

<g class="element basic Rect">    <g class="rotatable">        <g class="scalable">            <rect />        </g>        <text />    </g></g>

请记住，您的样式是SVG，而不是HTML。在这种情况下，如果您对SVG完全陌生，您可能需要查看例如：MDN教程。如果您使用外部CSS来为元素设置样式，则所有元素都将具有相同的样式。还要注意，通过SVG规范，CSS属性对SVG元素属性的优先级较高.这意味着无论您在外部样式表中定义什么都不能通过使用下面的方法2设置元素特定属性来推翻。

3.1.2 attr

更好的方法是使用attr方法。

rect.attr({    rect: { fill: '#2C3E50', rx: 5, ry: 5, 'stroke-width': 2, stroke: 'black' },    text: {        text: 'my label', fill: '#3498DB',        'font-size': 18, 'font-weight': 'bold', 'font-variant': 'small-caps', 'text-transform': 'capitalize'    }});

3.2 实例

3.2.1 效果图

3.2.2 代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>MyJointJS04</title>    <link rel="stylesheet" href="css/joint.css" />    <script type="text/javascript" src="js/jquery.js"></script>    <script type="text/javascript" src="js/lodash.js"></script><!--注意加载顺序-->    <script type="text/javascript" src="js/backbone.js"></script>    <script type="text/javascript" src="js/joint.js"></script></head><body><div id="mydiv"></div><script type="text/javascript">    var graph=new joint.dia.Graph;  //创建模型    var  paper=new joint.dia.Paper({        el: $('#mydiv'),      //纸放在哪        width: 1000,            //纸多大        height: 500,        model: graph,       //纸里有什么        gridSize: 1    });  //注意Paper,js对大小写敏感    var rect=new joint.shapes.basic.Rect({  //绘制元素        position:{x: 100 , y: 70},        size: {width: 100 ,height: 30},//        attrs: {rect: {fill: 'pink' }, text: {text: 'QLY' , fill: 'white'} }    });    rect.attr({        rect: { fill: 'pink', rx: 5, ry: 5, 'stroke-width': 2, stroke: '#FFAAAA' }, //矩形填充色、圆角x和y方向偏移量、边框粗细、颜色        text: {            text: 'my rect', fill: '#3498DB',            'font-size': 18, 'font-weight': 'bold', 'font-variant': 'small-caps', 'text-transform': 'capitalize'        }    });    var rect1=rect.clone();    rect1.translate(200);    rect1.attr({        rect: { fill: 'black', rx: 0, ry: 0, 'stroke-width': 1, stroke: 'black' }, //矩形填充色、圆角x和y方向偏移量、边框粗细、颜色        text: {            text: 'my rect', fill: 'white',            'font-size': 18, 'font-weight': 'bold', 'font-variant': 'small-caps', 'text-transform': 'capitalize'        }    });    graph.addCells([rect,rect1]);</script></body></html>

阅读全文

1 0