jointjs Element

jointjs Element

标准形状库中有很多现成 的已经定义的元素直接可以用.可以一自己去创建一些自定义类joint.dia.Element.
关于新建的元素的一些属性可以在定义元素之后再次进行覆盖修改.
关于标准库创建图形元素的使用方法:

var rectangle = new joint.shapes.standard.Rectangle();
rectangle.resize(100, 100);
//关于resize的一些用法
//element.resize(width, height [, opt])
//opt是一个参数用来定义大小改变的方向
//resize来调节大小，可以选择性的调节大小。举个例子，如果在一个长方形rect上添加了一个新的元素文本框
//并且期望当调整元素大小时，矩形rect被调整，而文本大小保持不变，保持在矩形正中心。
//通过把<g class"scalable"/>添加到rect的makeup中
//并且将文本的元素设置<text ref-x=".5" ref-y=".5" ref="rect" />
rectangle.position(50, 10);
rectangle.attr('root/title', 'joint.shapes.standard.Rectangle');
rectangle.attr('label/text', 'Rectangle');
rect2.attr({
    label: {
        text: 'World!'
    }
});
rect2.attr('label', {
    text: 'World!'
});//也可以用这种形式写
rectangle.attr('body/fill', 'lightblue');
//官网给出
//root：SVGGElement,结点容器？？？？
//body：SVGRectElement,rect图形 的外形属性
//lable：SVGTextElement，body中的文本
//通过.attr来修改
rectangle.addTo(graph);

dia.element
一个图的元素模型
SVG的一些属性设置在arrt上,可以找到SVG属性的列表以及它们的描述.
每个dia.Element都定义了SVG标记，然后由dia.ElementView使用SVG的markup将元素呈现给paper

the joint.shapes.basic.Rect element (继承自joint.dia.Element)定义他的markup:
<g class="rotatable"><g class="scalable"><rect/></g><text/></g>
rotatable:可旋转     scalable:可拉伸
 change - generic event triggered for any change on the element - fn(element, opt)
 change:position - triggered when the element changes its position - fn(element, newPosition, opt)
 change:angle - triggered when the element gets rotated - fn(element, newAngle, opt)//旋转触发
 change:size - triggered when the element gets resized - fn(element, newSize, opt)//大小改变触发
 change:attrs - triggered when the element changes its attributes - fn(element, newAttrs, opt)//属性触发
 
// Listening for changes of the position to a single element
element1.on('change:position', function(element1, position) {
  alert('element1 moved to ' + position.x + ',' + position.y);
});//在哪里在那个cell上（element1），发生什么（change:position），发生后做什么（function），可以得到什么参数（position）
// All elements events are also propagated to the graph.
graph.on('change:position', function(element, position) {
  console.log('Element ' + element.id + 'moved to ' + position.x + ',' + position.y);
});
// Using the option parameter and a custom attribute
graph.on('change:custom', function(element, custom, opt) {
  if (opt.consoleOutput) {
    console.log('Custom attribute value changed to "' + custom + '"');
  }
});//？？？？
element2.prop('custom', 'myValue', { consoleOutput: true });