Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to use jointJS", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use jointJS" this article.

Recently, due to the needs of the project, began to contact jointJS, properly keep browsing the document mode, first write a superficial understanding of jointjs.

We can use the diagram elements already provided by JointJS to draw, or we can customize some diagram elements according to our needs. In addition, the charts created by JointJS are SVG graphs. If you want to change the graphic style, just go to GoogleSVG related syntax. In addition, it is extremely easy to use and easy to operate, and supports all modern browsers.

Let's show the use of jointjs through a small demo.

First of all, go to the official website to download these files, which can be found in the HTML code block head: when everything is ready, here we go.

First look at the HTML code, body is a div#myholder used to hold my artboard graph, here someone will ask what is graph, urgent, please read on.

The JS code is as follows: the first is to define the artboard and canvas

Var graph = new joint.dia.Graph; var paper = new joint.dia.Paper ({el: $('# myholder'), / / here is the container where you want to put graph width: 1300, height: 800, model: graph, gridSize: 1})

Next, draw a simple rectangle. To change some of the default styles, you need to know the SVG DOM structure of the element:

Var rect = new joint.shapes.basic.Rect ({position: {x: 100, y: 30}, size: {width: 200, height: 30}, attrs: {/ / attr SVG attr prop- custom data rect: {fill: 'rgb (238244247)', 'stroke':' rgb (47152223)' 'stroke-width':' 1px' / / svg coloring fill stroke}, text: {text:'my box', fill: 'black'})

Similar to a rectangle, we can also draw an ellipse with the following code:

Var ellipse = new joint.shapes.basic.Rect ({position: {x: 100, y: 30}, size: {width: 200, height: 30}, attrs: {/ / attr SVG attr prop- custom data rect: {fill: 'rgb (238244247)', 'stroke':' rgb (47152223)' 'stroke-width':' 1pxcards, 'rx':' 10pxtiles, 'ry':' 30px' / / svg coloring fill stroke}, text: {text: 'ellipse', fill:' pink'})

Let them have a certain distance.

Ellipse.translate (300); / / the distance between two blocks

Next, let's draw a line:

Var link = new joint.dia.Link ({source: {id: rect.id}, target: {id: ellipse.id}})

Put all the objects created in front of you into the drawing board:

Graph.addCells ([rect, rect2, link]); the above is all the content of this article "how to use jointJS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.