2.jointjs-elements

In this section, we will learn how to create graph elements and how to change their appearance. This is an introduction to elements as they appear in the Hello, World! application; more advanced topics are covered later in the tutorial series. We will continue with the code we modified in the previous section:
在本节中，我们将学习如何创建图形元素以及如何更改它们的外观。这是对元素的介绍，因为它们出现在hello，world！应用程序中；更高级的主题将在教程系列的后面介绍。我们将继续上一节中修改的代码：

// 第一个矩形：
var rect = new joint.shapes.standard.Rectangle();

rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
    body: {
        fill: 'blue'
    },
    label: {
        text: 'Hello',
        fill: 'white'
    }
});

rect.addTo(graph);

// 第二个矩形：
var rect2 = rect.clone();

rect2.translate(300, 0);
rect2.attr('label/text', 'World!');

rect2.addTo(graph);

The code illustrates the basic idea of working with elements:

• First, an element is created by calling its constructor.
• Then, different methods are called on the element to set its properties (position, size, attributes…).
• Finally, the element is added to the graph.

代码说明了使用元素的基本思想：
1.首先，通过调用元素的构造函数来创建元素。
2.然后，对元素调用不同的方法来设置其属性（位置、大小、属性…）。
3.最后，元素被添加到图表中。

In our case, the two elements are instances of joint.shapes.standard.Rectangle. The standard shape library contains many more ready-made element definitions (e.g. Ellipse, Embedded Image, Cylinder…) that can be used in your document. Moreover, advanced users may supply their own element definitions instead, by extending the basic joint.dia.Element class.
在我们的例子中，这两个元素是joint.shapes.standard.rectangle的实例。标准形状库包含许多可在文档中使用的现成元素定义（例如椭圆、嵌入图像、圆柱体…）。此外，高级用户可以通过扩展基本joint.dia.element类来提供自己的元素定义。
ellipse
英 [ɪˈlɪps] 美 [ɪˈlɪps]
n.椭圆
cylinder
英 [ˈsɪlɪndə®] 美 [ˈsɪlɪndər]
n.圆柱;圆柱体;圆筒;(尤指用作容器的)圆筒状物;(发动机的)气缸
标准图形库：http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#shapes.standard.intro

var graph=new joint.dia.Graph;

var paper=new joint.dia.Paper({
    el:document.getElementById("myholder"),
    model:graph,
});

// 矩形：
var rectangle = new joint.shapes.standard.Rectangle();

rectangle.resize(100, 100);
rectangle.position(50, 10);
rectangle.attr('root/title', 'joint.shapes.standard.Rectangle'); // 鼠标放上去的提示信息
rectangle.attr('label/text', 'Rectangle');
rectangle.attr('body/fill', 'lightblue');

rectangle.addTo(graph);

// 圆柱体：
var cylinder= new joint.shapes.standard.Cylinder()
cylinder.position(400,400);
cylinder.resize(100,200);
cylinder.attr({
    root:{
        title:'圆柱体',
    },
    body:{
        fill:'blue'
    },
    label:{
        text:"cylinder"
    }, 
    top:{ // 上顶的颜色
        fill:'red',
    },
    
})
cylinder.addTo(graph)

Selector	Node	Description
root	SVGGElement	Container of all nodes
body	SVGRectElement	Rectangular body of the shape
label	SVGTextElement	Text inside the body

Our demo showcases some of the most important Element methods:

• element.position() - sets the position of the origin of the element (the top-left corner), relative to the paper’s coordinate system (taking into account paper scaling and other transformations).
• element.resize() - sets the dimensions of the element.
• element.clone() - clones an existing element, including its position, dimensions, and attributes (attributes are explained in more detail below).
• element.translate() - moves the element by the specified distance along the two coordinate axes. There are methods to scale and rotate elements, too.
• element.addTo() - adds the element to a graph so it can be rendered.

我们的例子展示了一些最重要的元素方法：
1.element.position() - 设置元素原点（左上角）相对于纸张坐标系的位置（考虑纸张缩放和其他转换）。
2.element.resize() - 设置元素的尺寸。
3.element.clone() - 克隆现有元素，包括其位置、尺寸和属性（属性将在下面进行更详细的说明）。
4.element.translate() - 沿两个坐标轴按指定距离移动元素。也有缩放和旋转元素的方法。
5.element.addTo() - 将元素添加到图形中以便呈现。
其他的方法：
http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Element.prototype.position

rect2.scale(0.5,0.5)  // 缩放
rect2.rotate(30)  // 旋转角度

Element Styling 元素的样式

Visually, the most important function is the one that changes element styling:

• element.attr() - programmatically assigns SVG attributes directly to the SVGElements of the shape’s markup. (CSS styles may still be used on top of the styling defined here, and they will have precedence over these attributes.)

从视觉上看，最重要的功能是改变元素样式：

1. element.attr() - 以编程方式将svg属性直接分配给形状标记的SVGElements 。（CSS样式可能仍在此处定义的样式之上使用，它们将优先于这些属性。）

precedence
英 [ˈpresɪdəns] 美 [ˈpresɪdəns]
n.优先;优先权

When element.attr() is called with one object as argument, the keys of the object are selectors that correspond to SVGElements of the shape’s markup; each of those can have one or more attributes defined alongside the value to be set. If you only need to change one value, you can also call element.attr() with two arguments; the first is the path of the attribute in the form ‘selector/attribute’ and the second is the value to be assigned.
当使用一个对象作为参数调用element.attr()时，对象的键是与形状标记的SVGElements 相对应的选择器；每个选择器都可以在要设置的值旁边定义一个或多个属性。如果只需要更改一个值，也可以使用两个参数调用element.attr()；第一个参数是"selector/attribute"形式的属性路径，第二个参数是要分配的值。

If you are completely new to SVG, you may want to have a look at, for example, the Fills and Strokes tutorial on MDN. JointJS is able to handle all standard SVG attributes, however, please note that we strongly encourage everyone to use camelCase versions of attribute names for consistency and in order to avoid the need for quotation marks in attribute name keys. In addition, JointJS provides an extensive set of non-standard special JointJS attributes; these allow you to specify attributes relatively to other shape selectors, among other things. Special attributes are discussed in detail later in the tutorial.
如果您对SVG完全陌生，您可能需要了解一下，例如，MDN上的填充和笔画教程。JointJS能够处理所有标准SVG属性，但是，请注意，我们强烈建议每个人使用属性名称的camelcase版本以保持一致性，并避免在属性名称键中使用引号。此外，jointjs提供了一组广泛的非标准特殊jointjs属性；这些属性允许您相对于其他形状选择器指定属性。本教程稍后将详细讨论特殊属性。

The joint.shapes.standard.Rectangle shape used in our example has two selectors defined: body (the SVGElement itself), and label (the SVGElement inside the shape). Other element shapes have their own selector names (although consistency was preserved where applicable, e.g. with body); please refer to the joint.shapes.standard documentation for detailed information.

示例中使用的joint.shapes.standard.rectangle形状定义了两个选择器：body（body）（ SVGElement ）和label（shape中的 SVGElement ）。其他元素形状有自己的选择器名称（尽可能在适用情况下保持一致性，例如body）；有关详细信息，请参阅 joint.shapes.standard文档。
eg: http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#shapes.standard
consistency
英 [kənˈsɪstənsi] 美 [kənˈsɪstənsi]
n. 一致性;连贯性;黏稠度;密实度;平滑度;坚实度
consistence
英 [kənˈsɪstəns] 美 [kənˈsɪstəns]
n.浓度；（流）稠度；坚固性（等于consistency）
consist
英 [kənˈsɪst] 美 [kənˈsɪst]
v.由…组成;由…构成;在于;存在于
consistent
英 [kənˈsɪstənt] 美 [kənˈsɪstənt]
adj. 一致的;始终如一的; 连续的;持续的;与…一致的;相符的;符合的;不矛盾的
applicable
英 [əˈplɪkəbl] 美 [ˈæplɪkəbl]
adj. 适用;合适，可应用的，

In the case of the rect element, we can see that the body selector is assigned a fill color attribute, while the label selector also has its text content set to ‘Hello’ (via a JointJS special attribute).

对于rect元素，我们可以看到body选择器被分配了一个fill-color属性，而label选择器也将其文本内容设置为“hello”（通过jointjs特殊属性）。

rect.attr({
    body: { // selector for the <rect> SVGElement
        fill: 'blue'
    },
    label: { // selector for the <text> SVGElement
        text: 'Hello',
        fill: 'white'
    }
});

rect2.attr('label/text', 'World!');

rect2.attr('label', {
    text: 'World!'
});

rect2.attr({
    label: {
        text: 'World!'
    }
});

修改element的样式，完整代码：

    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: document.getElementById('myholder'),
        model: graph,
        width: 600,
        height: 300, // height had to be increased
        gridSize: 10,
        drawGrid: true,
        background: {
            color: 'rgba(0, 255, 0, 0.3)'
        }
    });

    var rect = new joint.shapes.standard.Rectangle();
    rect.position(100, 30);
    rect.resize(100, 40);
    rect.attr({
        body: {
            fill: 'blue'
        },
        label: {
            text: 'Hello',
            fill: 'white'
        }
    });
    rect.addTo(graph);
    
    var rect2 = new joint.shapes.standard.Rectangle();
    rect2.position(400, 30);
    rect2.resize(100, 40);
    rect2.attr({
        body: {
            fill: '#2C3E50',
            rx: 5, // 圆角 radius
            ry: 5,
            strokeWidth: 2
        },
        label: {
            text: 'World!',
            fill: '#3498DB',
            fontSize: 18,
            fontWeight: 'bold',
            fontVariant: 'small-caps', // 大写 后第一个字母大写！
        }
    });
    rect2.addTo(graph);

    var link = new joint.shapes.standard.Link();
    link.source(rect);
    link.target(rect2);
    link.addTo(graph);
    
    var rect3 = new joint.shapes.standard.Rectangle();
    rect3.position(100, 130);
    rect3.resize(100, 40);
    rect3.attr({
        body: {
            fill: '#E74C3C',
            rx: 20,
            ry: 20,
            strokeWidth: 0
        },
        label: {
            text: 'Hello',
            fill: '#ECF0F1',
            fontSize: 11,
            fontVariant: 'small-caps'
        }
    });
    rect3.addTo(graph);

    var rect4 = new joint.shapes.standard.Rectangle();
    rect4.position(400, 130);
    rect4.resize(100, 40);
    rect4.attr({
        body: {
            fill: '#8E44AD',
            strokeWidth: 0
        },
        label: {
            text: 'World!',
            fill: 'white',
            fontSize: 13
        }
    });
    rect4.addTo(graph);
    
    var link2 = new joint.shapes.standard.Link();
    link2.source(rect3);
    link2.target(rect4);
    link2.addTo(graph);

    var rect5 = new joint.shapes.standard.Rectangle();
    rect5.position(100, 230);
    rect5.resize(100, 40);
    rect5.attr({
        body: {
            fill: '#2ECC71',
            strokeDasharray: '10,2',  // 边框虚线
        },
        label: {
            text: 'Hello',
            fill: 'black',
            fontSize: 13
        }
    });
    rect5.addTo(graph);
    
    var rect6 = new joint.shapes.standard.Rectangle();
    rect6.position(400, 230);
    rect6.resize(100, 40);
    rect6.attr({
        body: {
            fill: '#F39C12',
            rx: 20,
            ry: 20,
            strokeDasharray: '1,1'
        },
        label: {
            text: 'World!',
            fill: 'gray',
            fontSize: 18,
            fontWeight: 'bold',
            fontVariant: 'small-caps',
            textShadow: '1px 1px 1px black'
        }
    });
    rect6.addTo(graph);

    var link3 = new joint.shapes.standard.Link();
    link3.source(rect5);
    link3.target(rect6);
    link3.addTo(graph);

The Filters and Gradients tutorial illustrates some more advanced methods of SVG styling when applied to elements.
该Filters and Gradients展示出了一些SVG样式的更高级的方法。
==>advanced=>filters and gradients (http://resources.jointjs.com/tutorial/filters-gradients)

总结：

• element的方法：
  position，resize，clone，translate，addTo，scale，rotate，attr，

• attr中属性字段：

  • body：fill（背景颜色），rx（圆角），ry，stroke（边框颜色），strokeWidth（边框宽度），strokeDasharray（边框虚线），
  • label：fill（字体颜色），text（字体内容），fontSize，fontWeight，fontVariant（第一个字母大小），
  • root：title（hover提示文字）