paper
Version:
The Swiss Army Knife of Vector Graphics Scripting
2,369 lines (1,563 loc) • 167 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shape</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body>
<article class="reference">
<div class="reference-class">
<h1>Shape</h1>
<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
</div>
<!-- =============================== constructors ========================== -->
<div class="reference-members">
<h2>Constructors</h2>
<div id="shape-circle-center-radius" class="member">
<div class="member-link">
<a name="shape-circle-center-radius" href="#shape-circle-center-radius"><tt><b>Shape.Circle</b>(center, radius)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a circular shape item.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>center:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the center point of the circle
</li>
<li>
<tt>radius:</tt>
<tt>Number</tt>
— the radius of the circle
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Shape.html"><tt>Shape</tt></a></tt> — the newly created shape
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
var shape = new Shape.Circle(new Point(80, 50), 30);
shape.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>
</div>
</div>
</div>
<div id="shape-circle-object" class="member">
<div class="member-link">
<a name="shape-circle-object" href="#shape-circle-object"><tt><b>Shape.Circle</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a circular shape item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the shape’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Shape.html"><tt>Shape</tt></a></tt> — the newly created shape
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-1">
var shape = new Shape.Circle({
center: [80, 50],
radius: 30,
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>
</div>
</div>
</div>
<div id="shape-rectangle-rectangle" class="member">
<div class="member-link">
<a name="shape-rectangle-rectangle" href="#shape-rectangle-rectangle"><tt><b>Shape.Rectangle</b>(rectangle[, radius])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a rectangular shape item, with optionally rounded corners.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>rectangle:</tt>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
— the rectangle object describing the geometry of the rectangular shape to be created
</li>
<li>
<tt>radius:</tt>
<a href="../classes/Size.html"><tt>Size</tt></a>
— the size of the rounded corners
— optional, default: <tt>null</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Shape.html"><tt>Shape</tt></a></tt> — the newly created shape
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-2">
var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
var shape = new Shape.Rectangle(rectangle);
shape.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
</div>
<h4>Example:<span class="description">The same, with rounder corners</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-3">
var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
var cornerSize = new Size(10, 10);
var shape = new Shape.Rectangle(rectangle, cornerSize);
shape.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
</div>
</div>
</div>
</div>
<div id="shape-rectangle-point-size" class="member">
<div class="member-link">
<a name="shape-rectangle-point-size" href="#shape-rectangle-point-size"><tt><b>Shape.Rectangle</b>(point, size)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a rectangular shape item from a point and a size object.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>point:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the rectangle’s top-left corner.
</li>
<li>
<tt>size:</tt>
<a href="../classes/Size.html"><tt>Size</tt></a>
— the rectangle’s size.
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Shape.html"><tt>Shape</tt></a></tt> — the newly created shape
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-4">
var point = new Point(20, 20);
var size = new Size(60, 60);
var shape = new Shape.Rectangle(point, size);
shape.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
</div>
</div>
</div>
</div>
<div id="shape-rectangle-from-to" class="member">
<div class="member-link">
<a name="shape-rectangle-from-to" href="#shape-rectangle-from-to"><tt><b>Shape.Rectangle</b>(from, to)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a rectangular shape item from the passed points. These do not necessarily need to be the top left and bottom right corners, the constructor figures out how to fit a rectangle between them.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>from:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the first point defining the rectangle
</li>
<li>
<tt>to:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the second point defining the rectangle
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Shape.html"><tt>Shape</tt></a></tt> — the newly created shape
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-5">
var from = new Point(20, 20);
var to = new Point(80, 80);
var shape = new Shape.Rectangle(from, to);
shape.strokeColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
</div>
</div>
</div>
</div>
<div id="shape-rectangle-object" class="member">
<div class="member-link">
<a name="shape-rectangle-object" href="#shape-rectangle-object"><tt><b>Shape.Rectangle</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a rectangular shape item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the shape’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Shape.html"><tt>Shape</tt></a></tt> — the newly created shape
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-6">
var shape = new Shape.Rectangle({
point: [20, 20],
size: [60, 60],
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
</div>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-7">
var shape = new Shape.Rectangle({
from: [20, 20],
to: [80, 80],
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
</div>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-8">
var shape = new Shape.Rectangle({
rectangle: {
topLeft: [20, 20],
bottomRight: [80, 80]
},
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
</div>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-9">
var shape = new Shape.Rectangle({
topLeft: [20, 20],
bottomRight: [80, 80],
radius: 10,
strokeColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
</div>
</div>
</div>
</div>
<div id="shape-ellipse-rectangle" class="member">
<div class="member-link">
<a name="shape-ellipse-rectangle" href="#shape-ellipse-rectangle"><tt><b>Shape.Ellipse</b>(rectangle)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates an elliptical shape item.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>rectangle:</tt>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
— the rectangle circumscribing the ellipse
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Shape.html"><tt>Shape</tt></a></tt> — the newly created shape
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-10">
var rectangle = new Rectangle(new Point(20, 20), new Size(180, 60));
var shape = new Shape.Ellipse(rectangle);
shape.fillColor = 'black';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
</div>
</div>
</div>
</div>
<div id="shape-ellipse-object" class="member">
<div class="member-link">
<a name="shape-ellipse-object" href="#shape-ellipse-object"><tt><b>Shape.Ellipse</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates an elliptical shape item from the properties described by an object literal.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties describing the shape’s attributes
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Shape.html"><tt>Shape</tt></a></tt> — the newly created shape
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-11">
var shape = new Shape.Ellipse({
point: [20, 20],
size: [180, 60],
fillColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
</div>
<h4>Example:<span class="description">Placing by center and radius</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-12">
var shape = new Shape.Ellipse({
center: [110, 50],
radius: [90, 30],
fillColor: 'black'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="type" class="member">
<div class="member-link">
<a name="type" href="#type"><tt><b>type</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The type of shape of the item as a string.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="size" class="member">
<div class="member-link">
<a name="size" href="#size"><tt><b>size</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The size of the shape.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Size.html"><tt>Size</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="radius" class="member">
<div class="member-link">
<a name="radius" href="#radius"><tt><b>radius</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The radius of the shape, as a number if it is a circle, or a size object for ellipses and rounded rectangles.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>⟋<a href="../classes/Size.html"><tt>Size</tt></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="topath" class="member">
<div class="member-link">
<a name="topath" href="#topath"><tt><b>toPath</b>([insert])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new path item with same geometry as this shape item, and inherits all settings from it, similar to <a href="../classes/Item.html#clone"><tt>item.clone</tt></a>().</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>insert:</tt>
<tt>Boolean</tt>
— specifies whether the new path should be inserted into the scene graph. When set to <code>true</code>, it is inserted above the shape item
— optional, default: <tt>true</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path item with the same geometry as this shape item
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/Path.html#toshape-insert"><tt>path.toShape(insert)</tt></a></tt></li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== inherited properties ====================== -->
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
<div id="id" class="member">
<div class="member-link">
<a name="id" href="#id"><tt><b>id</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The unique id of the item.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="classname" class="member">
<div class="member-link">
<a name="classname" href="#classname"><tt><b>className</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The class name of the item as a string.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'Group'</tt>, <tt>'Layer'</tt>, <tt>'Path'</tt>, <tt>'CompoundPath'</tt>, <tt>'Shape'</tt>, <tt>'Raster'</tt>, <tt>'SymbolItem'</tt>, <tt>'PointText'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="name" class="member">
<div class="member-link">
<a name="name" href="#name"><tt><b>name</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The name of the item. If the item has a name, it can be accessed by name through its parent’s children list.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-13">
var path = new Path.Circle({
center: [80, 50],
radius: 35
});
// Set the name of the path:
path.name = 'example';
// Create a group and add path to it as a child:
var group = new Group();
group.addChild(path);
// The path can be accessed by name:
group.children['example'].fillColor = 'red';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
</div>
</div>
</div>
</div>
<div id="style" class="member">
<div class="member-link">
<a name="style" href="#style"><tt><b>style</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The path style of the item.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Style.html"><tt>Style</tt></a>
</li>
</ul>
<h4>Example:<span class="description">Applying several styles to an item in one go, by passing an object to its style property:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-14">
var circle = new Path.Circle({
center: [80, 50],
radius: 30
});
circle.style = {
fillColor: 'blue',
strokeColor: 'red',
strokeWidth: 5
};
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
</div>
<h4>Example:<span class="description">Copying the style of another item:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-15">
var path = new Path.Circle({
center: [50, 50],
radius: 30,
fillColor: 'red'
});
var path2 = new Path.Circle({
center: new Point(180, 50),
radius: 20
});
// Copy the path style of path:
path2.style = path.style;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
</div>
<h4>Example:<span class="description">Applying the same style object to multiple items:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-16">
var myStyle = {
fillColor: 'red',
strokeColor: 'blue',
strokeWidth: 4
};
var path = new Path.Circle({
center: [50, 50],
radius: 30
});
path.style = myStyle;
var path2 = new Path.Circle({
center: new Point(150, 50),
radius: 20
});
path2.style = myStyle;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
</div>
</div>
</div>
</div>
<div id="locked" class="member">
<div class="member-link">
<a name="locked" href="#locked"><tt><b>locked</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies whether the item is locked. When set to <code>true</code>, item interactions with the mouse are disabled.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>false</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-17">
var unlockedItem = new Path.Circle({
center: view.center - [35, 0],
radius: 30,
fillColor: 'springgreen',
onMouseDown: function() {
this.fillColor = Color.random();
}
});
var lockedItem = new Path.Circle({
center: view.center + [35, 0],
radius: 30,
fillColor: 'crimson',
locked: true,
// This event won't be triggered because the item is locked.
onMouseDown: function() {
this.fillColor = Color.random();
}
});
new PointText({
content: 'Click on both circles to see which one is locked.',
point: view.center - [0, 35],
justification: 'center'
});
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
</div>
</div>
</div>
</div>
<div id="visible" class="member">
<div class="member-link">
<a name="visible" href="#visible"><tt><b>visible</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies whether the item is visible. When set to <code>false</code>, the item won’t be drawn.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>true</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
<h4>Example:<span class="description">Hiding an item:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-18">
var path = new Path.Circle({
center: [50, 50],
radius: 20,
fillColor: 'red'
});
// Hide the path:
path.visible = false;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
</div>
</div>
</div>
</div>
<div id="blendmode" class="member">
<div class="member-link">
<a name="blendmode" href="#blendmode"><tt><b>blendMode</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported. If blend-modes cannot be rendered natively, they are emulated. Be aware that emulation can have an impact on performance.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'normal'</tt>, <tt>'multiply'</tt>, <tt>'screen'</tt>, <tt>'overlay'</tt>, <tt>'soft-light'</tt>, <tt>'hard-
light'</tt>, <tt>'color-dodge'</tt>, <tt>'color-burn'</tt>, <tt>'darken'</tt>, <tt>'lighten'</tt>, <tt>'difference'</tt>, <tt>'exclusion'</tt>, <tt>'hue'</tt>, <tt>'saturation'</tt>, <tt>'luminosity'</tt>, <tt>'color'</tt>, <tt>'add'</tt>, <tt>'subtract'</tt>, <tt>'average'</tt>, <tt>'pin-light'</tt>, <tt>'negation'</tt>, <tt>'source-over'</tt>, <tt>'source-in'</tt>, <tt>'source-out'</tt>, <tt>'source-atop'</tt>, <tt>'destination-over'</tt>, <tt>'destination-in'</tt>, <tt>'destination-out'</tt>, <tt>'destination-atop'</tt>, <tt>'lighter'</tt>, <tt>'darker'</tt>, <tt>'copy'</tt>, <tt>'xor'</tt></li>
</ul>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'normal'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
<h4>Example:<span class="description">Setting an item's blend mode:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-19">
// Create a white rectangle in the background
// with the same dimensions as the view:
var background = new Path.Rectangle(view.bounds);
background.fillColor = 'white';
var circle = new Path.Circle({
center: [80, 50],
radius: 35,
fillColor: 'red'
});
var circle2 = new Path.Circle({
center: new Point(120, 50),
radius: 35,
fillColor: 'blue'
});
// Set the blend mode of circle2:
circle2.blendMode = 'multiply';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
</div>
</div>
</div>
</div>
<div id="opacity" class="member">
<div class="member-link">
<a name="opacity" href="#opacity"><tt><b>opacity</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The opacity of the item as a value between <code>0</code> and <code>1</code>.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>1</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
<h4>Example:<span class="description">Making an item 50% transparent:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-20">
var circle = new Path.Circle({
center: [80, 50],
radius: 35,
fillColor: 'red'
});
var circle2 = new Path.Circle({
center: new Point(120, 50),
radius: 35,
fillColor: 'blue',
strokeColor: 'green',
strokeWidth: 10
});
// Make circle2 50% transparent:
circle2.opacity = 0.5;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
</div>
</div>
</div>
</div>
<div id="selected" class="member">
<div class="member-link">
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies whether the item is selected. This will also return <code>true</code> for <a href="../classes/Group.html"><tt>Group</tt></a> items if they are partially selected, e.g. groups containing selected or partially selected paths.</p>
<p>Paper.js draws the visual outlines of selected items on top of your project. This can be useful for debugging, as it allows you to see the construction of paths, position of path curves, individual segment points and bounding boxes of symbol and raster items.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>false</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
<ul class="member-list">
<h4>See also:</h4>
<li><tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt></li>
<li><tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt></li>
<li><tt><a href="../classes/Curve.html#selected"><tt>curve.selected</tt></a></tt></li>
<li><tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt></li>
</ul>
<h4>Example:<span class="description">Selecting an item:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-21">
var path = new Path.Circle({
center: [80, 50],
radius: 35
});
path.selected = true; // Select the path
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
</div>
</div>
</div>
</div>
<div id="clipmask" class="member">
<div class="member-link">
<a name="clipmask" href="#clipmask"><tt><b>clipMask</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Specifies whether the item defines a clip mask. This can only be set on paths and compound paths, and only if the item is already contained within a clipping group.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>false</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="data" class="member">
<div class="member-link">
<a name="data" href="#data"><tt><b>data</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>A plain javascript object which can be used to store arbitrary data on the item.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Object</tt>
</li>
</ul>
<h4>Example:</h4>
<pre><code>var path = new Path();
path.data.remember = 'milk';</code></pre>
<h4>Example:</h4>
<pre><code>var path = new Path();
path.data.malcolm = new Point(20, 30);
console.log(path.data.malcolm.x); // 20</code></pre>
<h4>Example:</h4>
<pre><code>var path = new Path();
path.data = {
home: 'Omicron Theta',
found: 2338,
pets: ['Spot']
};
console.log(path.data.pets.length); // 1</code></pre>
<h4>Example:</h4>
<pre><code>var path = new Path({
data: {
home: 'Omicron Theta',
found: 2338,
pets: ['Spot']
}
});
console.log(path.data.pets.length); // 1</code></pre>
</div>
</div>
</div>
<h3>Position and Bounding Boxes</h3>
<div id="position" class="member">
<div class="member-link">
<a name="position" href="#position"><tt><b>position</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The item’s position within the parent item’s coordinate system. By default, this is the <a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item’s <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> rectangle.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
<h4>Example:<span class="description">Changing the position of a path:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-22">
// Create a circle at position { x: 10, y: 10 }
var circle = new Path.Circle({
center: new Point(10, 10),
radius: 10,
fillColor: 'red'
});
// Move the circle to { x: 20, y: 20 }
circle.position = new Point(20, 20);
// Move the circle 100 points to the right and 50 points down
circle.position += new Point(100, 50);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
</div>
<h4>Example:<span class="description">Changing the x coordinate of an item's position:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-23">
// Create a circle at position { x: 20, y: 20 }
var circle = new Path.Circle({
center: new Point(20, 20),
radius: 10,
fillColor: 'red'
});
// Move the circle 100 points to the right
circle.position.x += 100;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
</div>
</div>
</div>
</div>
<div id="pivot" class="member">
<div class="member-link">
<a name="pivot" href="#pivot"><tt><b>pivot</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The item’s pivot point specified in the item coordinate system, defining the point around which all transformations are hinging. This is also the reference point for <a href="../classes/Item.html#position"><tt>position</tt></a>. By default, it is set to <code>null</code>, meaning the <a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item’s <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> rectangle is used as pivot.</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>null</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="bounds" class="member">
<div class="member-link">
<a name="bounds" href="#bounds"><tt><b>bounds</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The bounding rectangle of the item excluding stroke width.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="strokebounds" class="member">
<div class="member-link">
<a name="strokebounds" href="#strokebounds"><tt><b>strokeBounds</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The bounding rectangle of the item including stroke width.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="handlebounds" class="member">
<div class="member-link">
<a name="handlebounds" href="#handlebounds"><tt><b>handleBounds</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The bounding rectangle of the item including handles.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="internalbounds" class="member">
<div class="member-link">
<a name="internalbounds" href="#internalbounds"><tt><b>internalBounds</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The bounding rectangle of the item without any matrix transformations.</p>
<p>Typical use case would be drawing a frame around the object where you want to draw something of the same size, position, rotation, and scaling, like a selection frame.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="rotation" class="member">
<div class="member-link">
<a name="rotation" href="#rotation"><tt><b>rotation</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The current rotation angle of the item, as described by its <a href="../classes/Item.html#matrix"><tt>matrix</tt></a>. Please note that this only returns meaningful values for items with <a href="../classes/Item.html#applymatrix"><tt>applyMatrix</tt></a> set to <code>false</code>, meaning they do not directly bake transformations into their content.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="scaling" class="member">
<div class="member-link">
<a name="scaling" href="#scaling"><tt><b>scaling</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The current scale factor of the item, as described by its <a href="../classes/Item.html#matrix"><tt>matrix</tt></a>. Please note that this only returns meaningful values for items with <a href="../classes/Item.html#applymatrix"><tt>applyMatrix</tt></a> set to <code>false</code>, meaning they do not directly bake transformations into their content.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Point.html"><tt>Point</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="matrix" class="member">
<div class="member-link">
<a name="matrix" href="#matrix"><tt><b>matrix</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The item’s transformation matrix, defining position and dimensions in relation to its parent item in which it is contained.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="globalmatrix" class="member">
<div class="member-link">
<a name="globalmatrix" href="#globalmatrix"><tt><b>globalMatrix</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The item’s global transformation matrix in relation to the global project coordinate space. Note that the view’s transformations resulting from zooming and panning are not factored in.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="viewmatrix" class="member">
<div class="member-link">
<a name="viewmatrix" href="#viewmatrix"><tt><b>viewMatrix</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The item’s global matrix in relation to the view coordinate space. This means that the view’s transformations resulting from zooming and panning are factored in.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="applymatrix" class="member">
<div class="member-link">
<a name="applymatrix" href="#applymatrix"><tt><b>applyMatrix</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Controls whether the transformations applied to the item (e.g. through <a href="../classes/Item.html#transform-matrix"><tt>transform(matrix)</tt></a>, <a href="../classes/Item.html#rotate-angle"><tt>rotate(angle)</tt></a>, <a href="../classes/Item.html#scale-scale"><tt>scale(scale)</tt></a>, etc.) are stored in its <a href="../classes/Item.html#matrix"><tt>matrix</tt></a> property, or whether they are directly applied to its contents or children (passed on to the segments in <a href="../classes/Path.html"><tt>Path</tt></a> items, the children of <a href="../classes/Group.html"><tt>Group</tt></a> items, etc.).</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>true</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Boolean</tt>
</li>
</ul>
</div>
</div>
</div>
<h3>Project Hierarchy</h3>
<div id="project" class="member">
<div class="member-link">
<a name="project" href="#project"><tt><b>project</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The project that this item belongs to.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Project.html"><tt>Project</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="view" class="member">
<div class="member-link">
<a name="view" href="#view"><tt><b>view</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The view that this item belongs to.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/View.html"><tt>View</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="layer" class="member">
<div class="member-link">
<a name="layer" href="#layer"><tt><b>layer</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The layer that this item is contained within.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent" class="member">
<div class="member-link">
<a name="parent" href="#parent"><tt><b>parent</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The item that this item is contained within.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
<h4>Example:</h4>
<pre><code>var path = new Path();
// New items are placed in the active layer:
console.log(path.parent == project.activeLayer); // true
var group = new Group();
group.addChild(path);
// Now the parent of the path has become the group:
console.log(path.parent == group); // true</code></pre>
<h4>Example:<span class="description">Setting the parent of the item to another item</span></h4>
<pre><code>var path = new Path();
// New items are placed in the active layer:
console.log(path.parent == project.activeLayer); // true
var group = new Group();
path.parent = group;
// Now the parent of the path has become the group:
console.log(path.parent == group); // true
// The path is now contained in the children list of group:
console.log(group.children[0] == path); // true</code></pre>
<h4>Example:<span class="description">Setting the parent of an item in the constructor</span></h4>
<pre><code>var group = new Group();
var path = new Path({
parent: group
});
// The parent of the path is the group:
console.log(path.parent == group); // true
// The path is contained in the children list of group:
console.log(group.children[0] == path); // true</code></pre>
</div>
</div>
</div>
<div id="children" class="member">
<div class="member-link">
<a name="children" href="#children"><tt><b>children</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The children items contained within this item. Items that define a <a href="../classes/Item.html#name"><tt>name</tt></a> can also be accessed by name.</p>
<p><b>Please note:</b> The children array should not be modified directly using array functions. To remove single items from the children list, use <a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use <a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
</li>
</ul>
<h4>Example:<span class="description">Accessing items in the children array:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-24">
var path = new Path.Circle({
center: [80, 50],
radius: 35
});
// Create a group and move the path into it:
var group = new Group();
group.addChild(path);
// Access the path through the group's children array:
group.children[0].fillColor = 'red';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
</div>
<h4>Example:<span class="description">Accessing children by name:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-25">
var path = new Path.Circle({
center: [80, 50],
radius: 35
});
// Set the name of the path:
path.name = 'example';
// Create a group and move the path into it:
var group = new Group();
group.addChild(path);
// The path can be accessed by name:
group.children['example'].fillColor = 'orange';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
</div>
<h4>Example:<span class="description">Passing an array of items to item.children:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-26">
var path = new Path.Circle({
center: [80, 50],
radius: 35
});
var group = new Group();
group.children = [path];
// The path is the first child of the group:
group.firstChild.fillColor = 'green';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
</div>
</div>
</div>
</div>
<div id="firstchild" class="member">
<div class="member-link">
<a name="firstchild" href="#firstchild"><tt><b>firstChild</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The first item contained within this item. This is a shortcut for accessing <code>item.children[0]</code>.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="lastchild" class="member">
<div class="member-link">
<a name="lastchild" href="#lastchild"><tt><b>lastChild</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The last item contained within this item.This is a shortcut for accessing <code>item.children[item.children.length - 1]</code>.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="nextsibling" class="member">
<div class="member-link">
<a name="nextsibling" href="#nextsibling"><tt><b>nextSibling</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The next item on the same level as this item.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="previoussibling" class="member">
<div class="member-link">
<a name="previoussibling" href="#previoussibling"><tt><b>previousSibling</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The previous item on the same level as this item.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="index" class="member">
<div class="member-link">
<a name="index" href="#index"><tt><b>index</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The index of this item within the list of its parent’s children.</p>
<p>Read only.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<h3>Stroke Style</h3>
<div id="strokecolor" class="member">
<div class="member-link">
<a name="strokecolor" href="#strokecolor"><tt><b>strokeColor</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The color of the stroke.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
</li>
</ul>
<h4>Example:<span class="description">Setting the stroke color of a path:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-27">
// Create a circle shaped path at { x: 80, y: 50 }
// with a radius of 35:
var circle = new Path.Circle({
center: [80, 50],
radius: 35
});
// Set its stroke color to RGB red:
circle.strokeColor = new Color(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
</div>
</div>
</div>
</div>
<div id="strokewidth" class="member">
<div class="member-link">
<a name="strokewidth" href="#strokewidth"><tt><b>strokeWidth</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The width of the stroke.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
<h4>Example:<span class="description">Setting an item's stroke width:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-28">
// Create a circle shaped path at { x: 80, y: 50 }
// with a radius of 35:
var circle = new Path.Circle({
center: [80, 50],
radius: 35,
strokeColor: 'red'
});
// Set its stroke width to 10:
circle.strokeWidth = 10;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
</div>
</div>
</div>
</div>
<div id="strokecap" class="member">
<div class="member-link">
<a name="strokecap" href="#strokecap"><tt><b>strokeCap</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The shape to be used at the beginning and end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they have a stroke.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'round'</tt>, <tt>'square'</tt>, <tt>'butt'</tt></li>
</ul>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'butt'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
<h4>Example:<span class="description">A look at the different stroke caps:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-29">
var line = new Path({
segments: [[80, 50], [420, 50]],
strokeColor: 'black',
strokeWidth: 20,
selected: true
});
// Set the stroke cap of the line to be round:
line.strokeCap = 'round';
// Copy the path and set its stroke cap to be square:
var line2 = line.clone();
line2.position.y += 50;
line2.strokeCap = 'square';
// Make another copy and set its stroke cap to be butt:
var line2 = line.clone();
line2.position.y += 100;
line2.strokeCap = 'butt';
</script>
<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
</div>
</div>
</div>
</div>
<div id="strokejoin" class="member">
<div class="member-link">
<a name="strokejoin" href="#strokejoin"><tt><b>strokeJoin</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The shape to be used at the segments and corners of <a href="../classes/Path.html"><tt>Path</tt></a> items when they have a stroke.</p>
<ul class="member-list">
<h4>Values:</h4>
<li><tt>'miter'</tt>, <tt>'round'</tt>, <tt>'bevel'</tt></li>
</ul>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'miter'</tt></li>
</ul>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>String</tt>
</li>
</ul>
<h4>Example:<span class="description">A look at the different stroke joins:</span></h4>
<div class="paperscrip