jointjs
Version:
JavaScript diagramming library
157 lines (120 loc) • 8.06 kB
HTML
<html>
<head>
<link rel="canonical" href="http://www.jointjs.com/" />
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/tutorial.css" />
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
<!-- Dependencies: -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/backbone/backbone.js"></script>
<link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
<script type="text/javascript" src="../build/joint.min.js"></script>
<title>JointJS - JavaScript diagramming library - Getting started.</title>
</head>
<body class="language-javascript tutorial-page">
<script>
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
</script>
<div id="filters-gradients" class="tutorial">
<h2>Filters and gradients in elements and links</h2>
<p>This is an introduction to <a href="#filters" target="_self">filters</a> and
<a href="#gradients" target="_self">gradients</a> to style your JointJS
<a href="elements.html">elements</a> and <a href="links.html">links</a>.
JointJS uses standard SVG
<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter" target="_blank">filters</a>
and
<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients" target="_blank">gradients</a>,
only instead of writing the SVG markup code, you define your filters and gradients with plain JavaSript
objects.
JointJS then generates all the necessary SVG elements for you.</p>
<h3 id="filters">Filters</h3>
<p>Filters can be applied on <a href="custom-elements.html#markup">elements'</a> and
<a href="custom-links.html#markup">links'</a> subelements using the <code>filter</code> attribute:</p>
<ul>
<li><code>filter</code> - the filter to use on this subelement.
Defining filters is addressed in the
<a href="/docs/jointjs#specialAttributes.filter" target="_blank">special attributes</a> section of
JointJS docs.</li>
</ul>
<p>There are two ways to set the <code>filter</code> attribute:</p>
<ul>
<li>As a string.
The value will be interpreted by the browser as usual
(<a href="https://css-tricks.com/almanac/properties/f/filter/">filter info</a>).
For example, if the <code>filter</code> attribute is set to <code>'url(#myfilter)'</code>, the
browser will try to find an element with ID <code>'myfilter'</code> - which can be an SVG
<code><filter></code> element - and apply that filter on the subelement.</li>
<li>As an object.
In this case, JointJS will interpret the attribute as a <a href="special-attributes.html">special
attribute</a> and treat the object as a JointJS-specific filter definition with the following
format:</li>
</ul>
<pre><code>{
name: string, // filter name
args?: object // (optional) filter arguments (depending on the filter used)
}</code></pre>
<p>The full list of built-in filters and their parameters can be found in the
<a href="/docs/jointjs#specialAttributes.filter" target="_blank">API reference</a>.
The following example shows all built-in filters in action.
As you can see, filters can be applied on link subelements as well.</p>
<div id="paper-filters"></div>
<pre data-src="js/filters.js"></pre>
<p>JointJS source code: <a href="js/filters.js" target="_blank">filters.js</a></p>
<h3 id="gradients">Gradients</h3>
<p>Gradients are applied within the <code>stroke</code> and <code>fill</code> attributes of
<a href="custom-elements.html#markup">elements'</a> and
<a href="custom-links.html#markup">links'</a> subelements:</p>
<ul>
<li><code>fill</code> - the fill to apply on this subelement.
Specifying the fill value is addressed in the
<a href="/docs/jointjs#specialAttributes.fill" target="_blank">special attributes</a> section of
JointJS docs.</li>
<li><code>stroke</code> - the stroke to apply on this subelement.
Specifying the stroke value is addressed in the
<a href="/docs/jointjs#specialAttributes.stroke" target="_blank">special attributes</a> section of
JointJS docs.</li>
</ul>
<p>There are two ways to set these two attributes:</p>
<ul>
<li>As a string.
The value will be interpreted by the browser as usual
(<a href="https://css-tricks.com/almanac/properties/f/fill/">fill info</a>,
<a href="https://css-tricks.com/almanac/properties/s/stroke/">stroke info</a>).
Aside from straightforward values, such as <code>'orange'</code>, <code>'#ff0000'</code> or
<code>'rgba(255, 165, 0, 0.3)'</code>, this includes pattern references.
For example, if the <code>fill</code> attribute is set to <code>'url(#mypatterm)'</code>, the
browser will try to find an element with ID <code>'mypattern'</code> - which can be an SVG
<code><pattern></code> element - and apply that pattern on the subelement.</li>
<li>As an object.
In this case, JointJS will interpret the attribute as a <a href="special-attributes.html">special
attribute</a> and treat the object as a JointJS-specific gradient definition with the following
format:</li>
</ul>
<pre><code>{
type: 'linearGradient' | 'radialGradient', // type of gradient
stops: Array<{ // an array of stop colors
offset: string, // offset of the stop (percentage)
color: string, // color of the stop
opacity?: number // (optional) opacity of the stop (number between 0 and 1)
attrs?: object // (optional) additional attributes for the gradient
}</code></pre>
<p>There are two types of gradients, linear and radial.
The following example shows both of them in action.
Note how the last element uses the additional gradient attributes (<code>attrs</code>), which allows the
direction of the gradient to be specified.</p>
<div id="paper-gradients"></div>
<pre data-src="js/gradients.js"></pre>
<p>JointJS source code: <a href="js/gradients.js" target="_blank">gradients.js</a></p>
</div><!--end tutorial-->
<script src="../node_modules/prismjs/prism.js"></script>
<script src="js/filters.js"></script>
<script src="js/gradients.js"></script>
</body>
</html>