gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
134 lines (133 loc) • 57.1 kB
HTML
<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Picture | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"><div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"><div class="md:pl-4"><a class="text-white hover:text-white no-underline hover:no-underline\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">GoJS</h1></a></div><button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"><svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"><path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path><path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button><div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"><ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"><li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">GoJS API</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class Picture </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a><ul class="tsd-hierarchy"><li><span class="target">Picture</span></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography">
<p>A Picture is a <a href="GraphObject.html">GraphObject</a> that shows an image, video-frame, or Canvas element.</p>
<div><p>You can specify what to show by either setting the <a href="Picture.html#source">source</a> URL property
to a URL string or the <a href="Picture.html#element">element</a> property to an HTMLImageElement,
HTMLCanvasElement, or HTMLVideoElement.</p>
<p>If a <a href="Picture.html#source">source</a> URL is set, the Picture will automatically create a corresponding
HTMLImageElement and retain a reference to it in memory. If multiple Pictures specify
the same <a href="Picture.html#source">source</a> URL then they will all refer to the same HTMLImageElement.</p>
<p>Some created Pictures:</p>
<pre><code class="language-js"><span class="hl-1">var</span><span class="hl-2"> </span><span class="hl-4">$</span><span class="hl-2"> = </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">GraphObject</span><span class="hl-2">.</span><span class="hl-4">make</span><span class="hl-2">; </span><span class="hl-0">// for conciseness in defining GraphObjects</span><br/><br/><span class="hl-0">// A picture with the source set to "example.png". It will show a gray area until the image is loaded:</span><br/><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Picture</span><span class="hl-2">, { </span><span class="hl-4">source:</span><span class="hl-2"> </span><span class="hl-6">"example.png"</span><span class="hl-2">, </span><span class="hl-4">background:</span><span class="hl-2"> </span><span class="hl-6">"gray"</span><span class="hl-2">, </span><span class="hl-4">width:</span><span class="hl-2"> </span><span class="hl-7">50</span><span class="hl-2">, </span><span class="hl-4">height:</span><span class="hl-2"> </span><span class="hl-7">50</span><span class="hl-2"> })</span><br/><span class="hl-0">// Alternatively:</span><br/><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Picture</span><span class="hl-2">, </span><span class="hl-6">"example.png"</span><span class="hl-2">, { </span><span class="hl-4">background:</span><span class="hl-2"> </span><span class="hl-6">"gray"</span><span class="hl-2">, </span><span class="hl-4">width:</span><span class="hl-2"> </span><span class="hl-7">50</span><span class="hl-2">, </span><span class="hl-4">height:</span><span class="hl-2"> </span><span class="hl-7">50</span><span class="hl-2"> })</span>
</code></pre>
<p>If an element is not completely loaded during Diagram initialization, a redraw may occur,
and if an image's size is not known before loading, the containing Part of this Picture
may be resized, causing side effects such as layouts.
This can be avoided by knowing the size of the image beforehand,
and setting the Picture's <a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a>.</p>
<p>With some images (notably sprite sheets) only a portion of the image is expected to be drawn.
The <a href="Picture.html#sourceRect">sourceRect</a> property allows the programmer to specify a rectangular area of
the source image that the Picture should display.</p>
<p>The <a href="Picture.html#imageStretch">imageStretch</a> property allows an image to be resized inside of its bounding box.
This property does not change the size of the Picture element, it only resizes or re-scales
the image to fit (or not) in its bounds.</p>
<p class="boxread">
For examples of sizing and <a href="Picture.html#imageStretch">imageStretch</a>,
see the <a href="../../intro/pictures.html">Introduction page on Pictures</a>.
<p>The <a href="Picture.html#errorFunction">errorFunction</a> property allows one to set a function to call when a source fails to load.
This is useful in instances where images cannot be guaranteed to work, such as with
user specified input. The error function can set the <a href="Picture.html#source">source</a> to a known good value,
but care should be taken to avoid error infinite loops when doing so.</p>
</div></div></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Constructors</h3><ul class="tsd-index-list"><li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="Picture.html#constructor" class="tsd-kind-icon">constructor</a></li></ul></section><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Picture.html#element" class="tsd-kind-icon">element</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Picture.html#errorFunction" class="tsd-kind-icon">error<wbr/>Function</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Picture.html#flip" class="tsd-kind-icon">flip</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Picture.html#imageAlignment" class="tsd-kind-icon">image<wbr/>Alignment</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Picture.html#imageStretch" class="tsd-kind-icon">image<wbr/>Stretch</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-overwrite"><a href="Picture.html#naturalBounds" class="tsd-kind-icon">natural<wbr/>Bounds</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Picture.html#source" class="tsd-kind-icon">source</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Picture.html#sourceCrossOrigin" class="tsd-kind-icon">source<wbr/>Cross<wbr/>Origin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Picture.html#sourceRect" class="tsd-kind-icon">source<wbr/>Rect</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Picture.html#successFunction" class="tsd-kind-icon">success<wbr/>Function</a></li></ul></section><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="Picture.html#redraw" class="tsd-kind-icon">redraw</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Picture.html#reloadSource" class="tsd-kind-icon">reload<wbr/>Source</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><h2>Inherited Members</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section undefined"><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionCancel" class="tsd-kind-icon">Graph<wbr/>Object.action<wbr/>Cancel</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionDown" class="tsd-kind-icon">Graph<wbr/>Object.action<wbr/>Down</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionMove" class="tsd-kind-icon">Graph<wbr/>Object.action<wbr/>Move</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#actionUp" class="tsd-kind-icon">Graph<wbr/>Object.action<wbr/>Up</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#actualBounds" class="tsd-kind-icon">Graph<wbr/>Object.actual<wbr/>Bounds</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignment" class="tsd-kind-icon">Graph<wbr/>Object.alignment</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#alignmentFocus" class="tsd-kind-icon">Graph<wbr/>Object.alignment<wbr/>Focus</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#angle" class="tsd-kind-icon">Graph<wbr/>Object.angle</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#background" class="tsd-kind-icon">Graph<wbr/>Object.background</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#click" class="tsd-kind-icon">Graph<wbr/>Object.click</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#column" class="tsd-kind-icon">Graph<wbr/>Object.column</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#columnSpan" class="tsd-kind-icon">Graph<wbr/>Object.column<wbr/>Span</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextClick" class="tsd-kind-icon">Graph<wbr/>Object.context<wbr/>Click</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#contextMenu" class="tsd-kind-icon">Graph<wbr/>Object.context<wbr/>Menu</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#cursor" class="tsd-kind-icon">Graph<wbr/>Object.cursor</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#desiredSize" class="tsd-kind-icon">Graph<wbr/>Object.desired<wbr/>Size</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#diagram" class="tsd-kind-icon">Graph<wbr/>Object.diagram</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#doubleClick" class="tsd-kind-icon">Graph<wbr/>Object.double<wbr/>Click</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#enabledChanged" class="tsd-kind-icon">Graph<wbr/>Object.enabled<wbr/>Changed</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromEndSegmentLength" class="tsd-kind-icon">Graph<wbr/>Object.from<wbr/>End<wbr/>Segment<wbr/>Length</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkable" class="tsd-kind-icon">Graph<wbr/>Object.from<wbr/>Linkable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkableDuplicates" class="tsd-kind-icon">Graph<wbr/>Object.from<wbr/>Linkable<wbr/>Duplicates</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromLinkableSelfNode" class="tsd-kind-icon">Graph<wbr/>Object.from<wbr/>Linkable<wbr/>Self<wbr/>Node</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromMaxLinks" class="tsd-kind-icon">Graph<wbr/>Object.from<wbr/>Max<wbr/>Links</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromShortLength" class="tsd-kind-icon">Graph<wbr/>Object.from<wbr/>Short<wbr/>Length</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#fromSpot" class="tsd-kind-icon">Graph<wbr/>Object.from<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#height" class="tsd-kind-icon">Graph<wbr/>Object.height</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isActionable" class="tsd-kind-icon">Graph<wbr/>Object.is<wbr/>Actionable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#isPanelMain" class="tsd-kind-icon">Graph<wbr/>Object.is<wbr/>Panel<wbr/>Main</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#layer" class="tsd-kind-icon">Graph<wbr/>Object.layer</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#margin" class="tsd-kind-icon">Graph<wbr/>Object.margin</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#maxSize" class="tsd-kind-icon">Graph<wbr/>Object.max<wbr/>Size</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#measuredBounds" class="tsd-kind-icon">Graph<wbr/>Object.measured<wbr/>Bounds</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#minSize" class="tsd-kind-icon">Graph<wbr/>Object.min<wbr/>Size</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDragEnter" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Drag<wbr/>Enter</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDragLeave" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Drag<wbr/>Leave</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseDrop" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Drop</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseEnter" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Enter</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHold" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Hold</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseHover" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Hover</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseLeave" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Leave</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#mouseOver" class="tsd-kind-icon">Graph<wbr/>Object.mouse<wbr/>Over</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#name" class="tsd-kind-icon">Graph<wbr/>Object.name</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#opacity" class="tsd-kind-icon">Graph<wbr/>Object.opacity</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#panel" class="tsd-kind-icon">Graph<wbr/>Object.panel</a></li><li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="GraphObject.html#part" class="tsd-kind-icon">Graph<wbr/>Object.part</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#pickable" class="tsd-kind-icon">Graph<wbr/>Object.pickable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#portId" class="tsd-kind-icon">Graph<wbr/>Object.port<wbr/>Id</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#position" class="tsd-kind-icon">Graph<wbr/>Object.position</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#row" class="tsd-kind-icon">Graph<wbr/>Object.row</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#rowSpan" class="tsd-kind-icon">Graph<wbr/>Object.row<wbr/>Span</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#scale" class="tsd-kind-icon">Graph<wbr/>Object.scale</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentFraction" class="tsd-kind-icon">Graph<wbr/>Object.segment<wbr/>Fraction</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentIndex" class="tsd-kind-icon">Graph<wbr/>Object.segment<wbr/>Index</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOffset" class="tsd-kind-icon">Graph<wbr/>Object.segment<wbr/>Offset</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#segmentOrientation" class="tsd-kind-icon">Graph<wbr/>Object.segment<wbr/>Orientation</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#shadowVisible" class="tsd-kind-icon">Graph<wbr/>Object.shadow<wbr/>Visible</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#stretch" class="tsd-kind-icon">Graph<wbr/>Object.stretch</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toEndSegmentLength" class="tsd-kind-icon">Graph<wbr/>Object.to<wbr/>End<wbr/>Segment<wbr/>Length</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkable" class="tsd-kind-icon">Graph<wbr/>Object.to<wbr/>Linkable</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkableDuplicates" class="tsd-kind-icon">Graph<wbr/>Object.to<wbr/>Linkable<wbr/>Duplicates</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toLinkableSelfNode" class="tsd-kind-icon">Graph<wbr/>Object.to<wbr/>Linkable<wbr/>Self<wbr/>Node</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toMaxLinks" class="tsd-kind-icon">Graph<wbr/>Object.to<wbr/>Max<wbr/>Links</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toShortLength" class="tsd-kind-icon">Graph<wbr/>Object.to<wbr/>Short<wbr/>Length</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toSpot" class="tsd-kind-icon">Graph<wbr/>Object.to<wbr/>Spot</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#toolTip" class="tsd-kind-icon">Graph<wbr/>Object.tool<wbr/>Tip</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#visible" class="tsd-kind-icon">Graph<wbr/>Object.visible</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphObject.html#width" class="tsd-kind-icon">Graph<wbr/>Object.width</a></li></ul></section><section class="tsd-index-section undefined"><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#apply" class="tsd-kind-icon">Graph<wbr/>Object.apply</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#attach" class="tsd-kind-icon">Graph<wbr/>Object.attach</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#bind" class="tsd-kind-icon">Graph<wbr/>Object.bind</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#copy" class="tsd-kind-icon">Graph<wbr/>Object.copy</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#findBindingPanel" class="tsd-kind-icon">Graph<wbr/>Object.find<wbr/>Binding<wbr/>Panel</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentAngle" class="tsd-kind-icon">Graph<wbr/>Object.get<wbr/>Document<wbr/>Angle</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentBounds" class="tsd-kind-icon">Graph<wbr/>Object.get<wbr/>Document<wbr/>Bounds</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentPoint" class="tsd-kind-icon">Graph<wbr/>Object.get<wbr/>Document<wbr/>Point</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getDocumentScale" class="tsd-kind-icon">Graph<wbr/>Object.get<wbr/>Document<wbr/>Scale</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#getLocalPoint" class="tsd-kind-icon">Graph<wbr/>Object.get<wbr/>Local<wbr/>Point</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#isContainedBy" class="tsd-kind-icon">Graph<wbr/>Object.is<wbr/>Contained<wbr/>By</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#isEnabledObject" class="tsd-kind-icon">Graph<wbr/>Object.is<wbr/>Enabled<wbr/>Object</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#isVisibleObject" class="tsd-kind-icon">Graph<wbr/>Object.is<wbr/>Visible<wbr/>Object</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#set" class="tsd-kind-icon">Graph<wbr/>Object.set</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#setProperties" class="tsd-kind-icon">Graph<wbr/>Object.set<wbr/>Properties</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphObject.html#trigger" class="tsd-kind-icon">Graph<wbr/>Object.trigger</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Constructors</h2><section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><li class="tsd-signature tsd-kind-icon">new <wbr/>Picture<span class="tsd-signature-symbol">(</span>source<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a></li><li class="tsd-signature tsd-kind-icon">new <wbr/>Picture<span class="tsd-signature-symbol">(</span>init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>The constructor creates a Picture that shows nothing until the
<a href="Picture.html#source">source</a> or <a href="Picture.html#element">element</a> is specified. It is also common to specify the
<a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a> to make sure that the picture's size is known
before the image is loaded asynchronously, so that layouts do not need to be recomputed.</p>
<div><p>Common usage:</p>
<pre><code class="language-js"><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Picture</span><span class="hl-2">(</span><span class="hl-6">"example_image_url.png"</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-4">width:</span><span class="hl-2"> </span><span class="hl-7">100</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">height:</span><span class="hl-2"> </span><span class="hl-7">50</span><br/><span class="hl-2">})</span>
</code></pre>
<p>Or:</p>
<pre><code class="language-js"><span class="hl-0">// specify a different source for each node in the node data</span><br/><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Picture</span><span class="hl-2">({</span><br/><span class="hl-2"> </span><span class="hl-4">width:</span><span class="hl-2"> </span><span class="hl-7">100</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-4">height:</span><span class="hl-2"> </span><span class="hl-7">50</span><br/><span class="hl-2">}).</span><span class="hl-5">bind</span><span class="hl-2">(</span><span class="hl-6">"source"</span><span class="hl-2">)</span>
</code></pre>
</div></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> source: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography">
<p>Optionally set the Pictures's <a href="Picture.html#source">source</a>.</p>
</div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography">
<p>Optional properties to initialize.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a></h4></li><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>The constructor creates a Picture that shows nothing until the
<a href="Picture.html#source">source</a> or <a href="Picture.html#element">element</a> is specified. It is also common to specify the
<a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a> to make sure that the picture's size is known
before the image is loaded asynchronously, so that layouts do not need to be recomputed.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography">
<p>Optional properties to initialize.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="element" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> element<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLCanvasElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLImageElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLVideoElement</span><a href="#element" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the Picture's HTML element that provides some kind of visual image.</p>
<div><p>The default value is null.
This can be a HTMLImageElement, HTMLVideoElement, or HTMLCanvasElement.
If an image, this element must have its source (src) attribute defined.
Setting this does not set the <a href="Picture.html#source">Picture.source</a> attribute and that attribute may be unknowable.</p>
<p>If this property is set to an HTMLImageElement, and that element is not yet loaded before it is used,
the Diagrams using that Element will not redraw on their own.
You must call <a href="Picture.html#redraw">redraw</a> after the image is finished loading if you wish for the Diagram to be updated immediately.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="errorFunction" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> error<wbr/>Function<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a>, b<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Event</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><a href="#errorFunction" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the function to call if an image set by <a href="Picture.html#source">source</a> fails to load.
The arguments to this function are this Picture and the HTMLImageElement's "error" Event.</p>
<div><p>This is called once per Picture, for every Picture that is using the same <a href="Picture.html#source">source</a> that failed to load.
This will never be called if the <a href="Picture.html#source">source</a> is never set, and is not called with Pictures that use <a href="Picture.html#element">element</a> instead.</p>
<p>The default value is null, meaning that no specific action occurs when there is an error loading an image.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Picture.html#successFunction">successFunction</a></p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="flip" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> flip<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#flip" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets how the Picture is displayed: Either normally or with a Horizontal or Vertical flip or both.</p>
<div><p>Possible values are <a href="GraphObject.html#static-None">GraphObject.None</a>, <a href="GraphObject.html#static-FlipHorizontal">GraphObject.FlipHorizontal</a>, <a href="GraphObject.html#static-FlipVertical">GraphObject.FlipVertical</a>, or <a href="GraphObject.html#static-FlipBoth">GraphObject.FlipBoth</a>.
The default is <a href="GraphObject.html#static-None">GraphObject.None</a>.</p>
</div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>2.0</p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="imageAlignment" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> image<wbr/>Alignment<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type" data-tsd-kind="Class">Spot</a><a href="#imageAlignment" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the Spot to align the source image to, when the source image
is smaller than the Picture. This is only relevant when
the <a href="Picture.html#imageStretch">imageStretch</a> property value is not go.GraphObject.Fill.</p>
<div><p>This does not affect Picture coordinates or bounds, it only affects what is drawn within the given area.
The default value is <a href="Spot.html#static-Center">Spot.Center</a>.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Picture.html#imageStretch">imageStretch</a></p>
</dd><dt class="">since</dt><dd><p>1.7</p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="imageStretch" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> image<wbr/>Stretch<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><a href="#imageStretch" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets how the Picture's image is stretched within its bounding box.
Some images will be a different aspect ratio than their given size or <a href="GraphObject.html#desiredSize">desiredSize</a>.
This property will never change the size of the Picture itself,
only the size of the image that is drawn in the Picture's <a href="GraphObject.html#actualBounds">actualBounds</a>.</p>
<div><p>Possible values are <a href="GraphObject.html#static-Fill">GraphObject.Fill</a>, <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a>,
<a href="GraphObject.html#static-UniformToFill">GraphObject.UniformToFill</a>, and <a href="GraphObject.html#static-None">GraphObject.None</a>.
The default is <a href="GraphObject.html#static-Fill">GraphObject.Fill</a>.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Picture.html#imageAlignment">imageAlignment</a></p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-overwrite"><a id="naturalBounds" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOverride">Override</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> natural<wbr/>Bounds<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><a href="#naturalBounds" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>This read-only property returns the natural size of this picture as determined by its source's width and height.
The value is initially NaN x NaN until the picture has been measured.
It will use the <a href="Picture.html#element">element</a>'s <code>naturalWidth</code> and <code>naturalHeight</code> if available.</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="source" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> source<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#source" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the Picture's source URL, which can be any valid image (png, jpg, gif, etc) URL.</p>
<div><p>The default value is the empty string, which specifies no image source.
Setting this attribute creates an HTMLImageElement and sets the <a href="Picture.html#element">Picture.element</a>
attribute to that element. When the element loads, this Picture may remeasure if no <a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a> was set,
and Diagrams using the picture will redraw.</p>
<p>To avoid remeasuring and rearranging Parts as images load asynchronously,
be sure to set the <a href="GraphObject.html#desiredSize">GraphObject.desiredSize</a>
(or <a href="GraphObject.html#width">GraphObject.width</a> and <a href="GraphObject.html#height">GraphObject.height</a>) to fixed values.</p>
<p>Setting the source of multiple Pictures to the same URL will cause only one HTMLImageElement
to be created and shared. Setting the source to the empty string will set <a href="Picture.html#element">Picture.element</a> to null.
It is commonplace to either specify a constant URL or to data bind this property to some data property,
perhaps using a conversion function in order to produce a proper URL.</p>
<p>For cross-browser support of SVG sources additional care is needed.
See the final section of the <a href="../../intro/pictures.html">Introduction page on Pictures</a>.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="sourceCrossOrigin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> source<wbr/>Cross<wbr/>Origin<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">string</span><a href="#sourceCrossOrigin" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets a function that returns a value for image.crossOrigin.</p>
<div><p>The default value is null, which will not set a value for image.crossOrigin.
Set this property to a function that returns "anonymous" or "use-credentials"
if you want images to complete a cross-origin request.
Example:</p>
<pre><code class="language-js"><span class="hl-2"> </span><span class="hl-5">$</span><span class="hl-2">(</span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Picture</span><span class="hl-2">,</span><br/><span class="hl-2"> { </span><span class="hl-4">width:</span><span class="hl-2"> </span><span class="hl-7">64</span><span class="hl-2">, </span><span class="hl-4">height:</span><span class="hl-2"> </span><span class="hl-7">64</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-5">sourceCrossOrigin</span><span class="hl-4">:</span><span class="hl-2"> </span><span class="hl-4">pict</span><span class="hl-2"> </span><span class="hl-1">=></span><span class="hl-2"> </span><span class="hl-6">"use-credentials"</span><span class="hl-2"> },</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Binding</span><span class="hl-2">(</span><span class="hl-6">"source"</span><span class="hl-2">, </span><span class="hl-6">"path"</span><span class="hl-2">))</span>
</code></pre>
</div><dl class="tsd-comment-tags"><dt class="">since</dt><dd><p>1.5</p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="sourceRect" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> source<wbr/>Rect<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a><a href="#sourceRect" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the rectangular area of the source image that this picture should display.
This is only common with sprite maps and image tables.</p>
<div><p>The value must be of type <a href="Rect.html">Rect</a>.
The default value is Rect(NaN, NaN, NaN, NaN), which means the whole source image should be used.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="successFunction" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> success<wbr/>Function<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="Picture.html" class="tsd-signature-type" data-tsd-kind="Class">Picture</a>, b<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Event</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><a href="#successFunction" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>Gets or sets the function to call when an image set by <a href="Picture.html#source">source</a> loads successfully.
The arguments to this function are this Picture and the HTMLImageElement's "load" Event.</p>
<div><p>This is called once per Picture, for every Picture that is using the same <a href="Picture.html#source">source</a> that loaded successfully.
This will never be called if the <a href="Picture.html#source">source</a> is never set, and is not called with Pictures that use <a href="Picture.html#element">element</a> instead.
It is even called for a Picture source that has already loaded, so that creating copies of a Picture with this property set will
call it once for each newly created Picture.</p>
<p>The default value is null, meaning that no specific action occurs when an image finishes loading.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Picture.html#errorFunction">errorFunction</a></p>
</dd><dt class="">since</dt><dd><p>1.7</p>
</dd></dl></div></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Methods</h2><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a id="redraw" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> redraw<a href="#redraw" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-method tsd-parent-k