markgojs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GoJS® Picture Class</title> <script src="../../assets/js/jquery.min.js"></script> <script src="../../assets/js/bootstrap.min.js"></script> <script src="../../assets/js/highlight.js"></script> <script src="../../assets/js/api.js"></script> <script src="../../assets/js/fuse.min.js"></script> <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >  <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/> <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>  <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" /> </head> <body>  <nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top"> <div class="container-fluid"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#navbar"> <a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="../../index.html">Home</a></li> <li><a href="../../learn/index.html">Learn</a></li> <li><a href="../../samples/index.html">Samples</a></li> <li><a href="../../intro/index.html">Intro</a></li> <li><a href="../../api/index.html">API</a></li> <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li> <li><a href="../../download.html">Download</a></li> <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li> <li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li> <li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li> <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li> </ul> </div> </div> </nav> <div class="container-fluid">  <div id="navindex" class="col-md-2">   <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Diagram Classes</span> </div> </div> <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li> <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li> <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li> <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li> <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li> <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li> <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li> <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li> <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li> <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li> <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li> <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li> <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li> <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li> <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li> <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li> <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li> <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li> <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li> <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Geometry Classes</span> </div> </div> <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li> <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li> <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li> <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li> <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li> <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li> <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li> <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li> <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Model Classes</span> </div> </div> <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li> <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li> <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li> <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li> <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li> <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li> <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Layout Classes</span> </div> </div> <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li> <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li> <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li> <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li> <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li> <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li> <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Tool Classes</span> </div> </div> <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li> <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li> <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li> <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li> <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li> <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li> <li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li> <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li> <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li> <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li> <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li> <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li> <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li> <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li> <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li> <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li> <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Collection Classes</span> </div> </div> <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li> <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li> <li><a href="../symbols/List.html" class="linkConstructor">List</a></li> <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li> <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li> </ul> </div> </div> </div>   </div> <div id="contentBody" class="col-md-10"> <div class="searchsumm"> <div class="table-wrap"> <div class="table-cell" id="apisearch" data-base="../"> <div class="title">Search API</div> <div class="field"> <label for="search-field" class="search-icon"></label> <input id="search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> </div> <div class="table-cell" id="apisumm"> <input type="checkbox" id="showsumms" /> <label class="apisumms" for="showsumms">Show Summaries</label> </div> </div> </div>  <div id="header" class="fineprint"> <b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div>  <h2 class="classTitle"> Class Picture </h2>  <p class="classsummary"> <span class="extends"> Extends <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.</span> A Picture is a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that shows an image, video-frame, or Canvas element. <p> You can specify what to show by either setting the <a href="../symbols/Picture.html#source" class="linkProperty">source</a> URL property to a URL string or the <a href="../symbols/Picture.html#element" class="linkProperty">element</a> property to an HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement. <p> If a <a href="../symbols/Picture.html#source" class="linkProperty">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="../symbols/Picture.html#source" class="linkProperty">source</a> URL then they will all refer to the same HTMLImageElement. <p> Some created Pictures: <pre>var $ = go.GraphObject.make; // for conciseness in defining GraphObjects // A shape with the figure set to "example.png". It will show a gray area until the image is loaded: $(go.Picture, { source: "example.png", background: "gray", width: 50, height: 50 }) // Alternatively: $(go.Picture, "example.png", { background: "gray", width: 50, height: 50 })</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="../symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>. <p> With some images (notably sprite sheets) only a portion of the image is expected to be drawn. The <a href="../symbols/Picture.html#sourceRect" class="linkProperty">sourceRect</a> property allows the programmer to specify a rectangular area of the source image that the Picture should display. <p> The <a href="../symbols/Picture.html#imageStretch" class="linkProperty">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 class="boxread"> For examples of sizing and <a href="../symbols/Picture.html#imageStretch" class="linkProperty">imageStretch</a>, see the <a href="../../intro/pictures.html">Introduction page on Pictures</a>. <p> The <a href="../symbols/Picture.html#errorFunction" class="linkProperty">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="../symbols/Picture.html#source" class="linkProperty">source</a> to a known good value, but care should be taken to avoid error infinite loops when doing so. </p>  <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Picture."> <thead> <tr> <th scope="col" class="name">Name</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr> <td class="name" > <div class="name"> Picture() </div> </td> <td class="description"> <div class="description"> <p><p>The constructor creates a picture that shows nothing until the <a href="../symbols/Picture.html#source" class="linkProperty">source</a> or <a href="../symbols/Picture.html#element" class="linkProperty">element</a> is specified.<span class="nodetails" id="xconPicture"><a class="morelink" onclick="hst('conPicture')">More...</a></span> <span class="details" id="conPicture"> It is also common to specify the <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">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.</span> </div> </td> </tr> </tbody> </table> </div>  <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Picture."> <thead> <tr> <th scope="col" class="name">Name, Value Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="element" > <td class="name"> <div class="name"> element </div> <div class="attributes"> <span class="light">{HTMLImageElement | HTMLVideoElement | HTMLCanvasElement}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the Picture's HTML element that provides some kind of visual image.<span class="nodetails" id="xpropelement"><a class="morelink" onclick="hst('propelement')">More...</a></span> <span class="details" id="propelement"> </span><div class="details" id="dpropelement"><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="../symbols/Picture.html#source" class="linkProperty">Picture.source</a> attribute and that attribute may be unknowable.</div> </div> </td> </tr> <tr id="errorFunction" > <td class="name"> <div class="name"> errorFunction </div> <div class="attributes"> <span class="light">{function(Picture, Event) | null}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the function to call if an image fails to load.<span class="nodetails" id="xproperrorFunction"><a class="morelink" onclick="hst('properrorFunction')">More...</a></span> <span class="details" id="properrorFunction"> The arguments to this function are this Picture and the HTMLImageElement's "error" (onerror) Event. The default value is null, meaning that no specific action occurs when there is an error loading an image.</span> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/Picture.html#successFunction" class="linkProperty">successFunction</a></li> </ul> </div> </div> </td> </tr> <tr id="imageAlignment" > <td class="name"> <div class="name"> imageAlignment </div> <div class="attributes"> <span class="light">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>}</span> <span class="since" title="since">1.7</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the Spot to align the source image to, when the source image is smaller than the Picture.<span class="nodetails" id="xpropimageAlignment"><a class="morelink" onclick="hst('propimageAlignment')">More...</a></span> <span class="details" id="propimageAlignment"> This is only relevant when the <a href="../symbols/Picture.html#imageStretch" class="linkProperty">imageStretch</a> property value is not go.GraphObject.Fill. </span><div class="details" id="dpropimageAlignment"><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="../symbols/Spot.html#Center" class="linkConstant">Spot.Center</a>.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/Picture.html#imageStretch" class="linkProperty">imageStretch</a></li> </ul> </div> </div> </td> </tr> <tr id="imageStretch" > <td class="name"> <div class="name"> imageStretch </div> <div class="attributes"> <span class="light">{EnumValue}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets how the Picture's image is stretched within its bounding box.<span class="nodetails" id="xpropimageStretch"><a class="morelink" onclick="hst('propimageStretch')">More...</a></span> <span class="details" id="propimageStretch"> Some images will be a different aspect ratio than their given size or <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">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="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a>. </span><div class="details" id="dpropimageStretch"><p> Possible values are <a href="../symbols/GraphObject.html#Fill" class="linkConstant">GraphObject.Fill</a>, <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">GraphObject.Uniform</a>, <a href="../symbols/GraphObject.html#UniformToFill" class="linkConstant">GraphObject.UniformToFill</a>, and <a href="../symbols/GraphObject.html#None" class="linkConstant">GraphObject.None</a>. The default is <a href="../symbols/GraphObject.html#Fill" class="linkConstant">GraphObject.Fill</a>.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/Picture.html#imageAlignment" class="linkProperty">imageAlignment</a></li> </ul> </div> </div> </td> </tr> <tr id="naturalBounds" > <td class="name"> <div class="name"> naturalBounds </div> <div class="attributes"> <span class="light">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span> </div> </td> <td class="description"> <div class="description">  <p>This read-only property returns the natural size of this picture as determined by its source's width and height.<span class="nodetails" id="xpropnaturalBounds"><a class="morelink" onclick="hst('propnaturalBounds')">More...</a></span> <span class="details" id="propnaturalBounds"> The value is initially NaN x NaN until the picture has been measured. It will use the <a href="../symbols/Picture.html#element" class="linkProperty">element</a>'s <code>naturalWidth</code> and <code>naturalHeight</code> if available.</span> </div> </td> </tr> <tr id="source" > <td class="name"> <div class="name"> source </div> <div class="attributes"> <span class="light">{string}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the Picture's source URL, which can be any valid image (png, jpg, gif, etc) URL.<span class="nodetails" id="xpropsource"><a class="morelink" onclick="hst('propsource')">More...</a></span> <span class="details" id="propsource"> </span><div class="details" id="dpropsource"><p> The default value is the empty string, which specifies no image source. Setting this attribute creates an HTMLImageElement and sets the <a href="../symbols/Picture.html#element" class="linkProperty">Picture.element</a> attribute to that element. Setting the source of multiple Pictures to the same URL will cause only one HTMLImageElement to be created and shared. 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> To avoid remeasuring and rearranging Parts as images load asynchronously, be sure to set the <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a> (or <a href="../symbols/GraphObject.html#width" class="linkProperty">GraphObject.width</a> and <a href="../symbols/GraphObject.html#height" class="linkProperty">GraphObject.height</a>) to fixed values <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>.</div> </div> </td> </tr> <tr id="sourceCrossOrigin" > <td class="name"> <div class="name"> sourceCrossOrigin </div> <div class="attributes"> <span class="light">{function(Picture):string|null}</span> <span class="since" title="since">1.5</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets a function that returns a value for image.crossOrigin.<span class="nodetails" id="xpropsourceCrossOrigin"><a class="morelink" onclick="hst('propsourceCrossOrigin')">More...</a></span> <span class="details" id="propsourceCrossOrigin"> </span><div class="details" id="dpropsourceCrossOrigin"><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: <pre> $(go.Picture, { width: 64, height: 64 }, { sourceCrossOrigin: function(pict) { return "use-credentials"; } }, new go.Binding("source", "path")) </pre></div> </div> </td> </tr> <tr id="sourceRect" > <td class="name"> <div class="name"> sourceRect </div> <div class="attributes"> <span class="light">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the rectangular area of the source image that this picture should display.<span class="nodetails" id="xpropsourceRect"><a class="morelink" onclick="hst('propsourceRect')">More...</a></span> <span class="details" id="propsourceRect"> This is only common with sprite maps and image tables. </span><div class="details" id="dpropsourceRect"><p> The value must be of type <a href="../symbols/Rect.html" class="linkConstructor">Rect</a>. The default value is Rect(NaN, NaN, NaN, NaN), which means the whole source image should be used.</div> </div> </td> </tr> <tr id="successFunction" > <td class="name"> <div class="name"> successFunction </div> <div class="attributes"> <span class="light">{function(Picture, Event) | null}</span> <span class="since" title="since">1.7</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the function to call when an image loads successfully.<span class="nodetails" id="xpropsuccessFunction"><a class="morelink" onclick="hst('propsuccessFunction')">More...</a></span> <span class="details" id="propsuccessFunction"> The arguments to this function are this Picture and the HTMLImageElement's "load" Event. The default value is null, meaning that no specific action occurs when an image finishes loading.</span> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/Picture.html#errorFunction" class="linkProperty">errorFunction</a></li> </ul> </div> </div> </td> </tr> </tbody> </table> </div> <dl class="inheritsList"> <dt>Properties borrowed from class <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>: </dt><dd><a href="../symbols/GraphObject.html#actionCancel" class="linkProperty">actionCancel</a>, <a href="../symbols/GraphObject.html#actionDown" class="linkProperty">actionDown</a>, <a href="../symbols/GraphObject.html#actionMove" class="linkProperty">actionMove</a>, <a href="../symbols/GraphObject.html#actionUp" class="linkProperty">actionUp</a>, <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a>, <a href="../symbols/GraphObject.html#alignment" class="linkProperty">alignment</a>, <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">alignmentFocus</a>, <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>, <a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">areaBackground</a>, <a href="../symbols/GraphObject.html#background" class="linkProperty">background</a>, <a href="../symbols/GraphObject.html#click" class="linkProperty">click</a>, <a href="../symbols/GraphObject.html#column" class="linkProperty">column</a>, <a href="../symbols/GraphObject.html#columnSpan" class="linkProperty">columnSpan</a>, <a href="../symbols/GraphObject.html#contextClick" class="linkProperty">contextClick</a>, <a href="../symbols/GraphObject.html#contextMenu" class="linkProperty">contextMenu</a>, <a href="../symbols/GraphObject.html#cursor" class="linkProperty">cursor</a>, <a href="../symbols/GraphObject.html#Default" class="linkConstant">Default</a>, <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>, <a href="../symbols/GraphObject.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/GraphObject.html#doubleClick" class="linkProperty">doubleClick</a>, <a href="../symbols/GraphObject.html#enabledChanged" class="linkProperty">enabledChanged</a>, <a href="../symbols/GraphObject.html#Fill" class="linkConstant">Fill</a>, <a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">fromEndSegmentLength</a>, <a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a>, <a href="../symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">fromLinkableDuplicates</a>, <a href="../symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">fromLinkableSelfNode</a>, <a href="../symbols/GraphObject.html#fromMaxLinks" class="linkProperty">fromMaxLinks</a>, <a href="../symbols/GraphObject.html#fromShortLength" class="linkProperty">fromShortLength</a>, <a href="../symbols/GraphObject.html#fromSpot" class="linkProperty">fromSpot</a>, <a href="../symbols/GraphObject.html#height" class="linkProperty">height</a>, <a href="../symbols/GraphObject.html#Horizontal" class="linkConstant">Horizontal</a>, <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">isActionable</a>, <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">isPanelMain</a>, <a href="../symbols/GraphObject.html#layer" class="linkProperty">layer</a>, <a href="../symbols/GraphObject.html#margin" class="linkProperty">margin</a>, <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">maxSize</a>, <a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a>, <a href="../symbols/GraphObject.html#minSize" class="linkProperty">minSize</a>, <a href="../symbols/GraphObject.html#mouseDragEnter" class="linkProperty">mouseDragEnter</a>, <a href="../symbols/GraphObject.html#mouseDragLeave" class="linkProperty">mouseDragLeave</a>, <a href="../symbols/GraphObject.html#mouseDrop" class="linkProperty">mouseDrop</a>, <a href="../symbols/GraphObject.html#mouseEnter" class="linkProperty">mouseEnter</a>, <a href="../symbols/GraphObject.html#mouseHold" class="linkProperty">mouseHold</a>, <a href="../symbols/GraphObject.html#mouseHover" class="linkProperty">mouseHover</a>, <a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a>, <a href="../symbols/GraphObject.html#mouseOver" class="linkProperty">mouseOver</a>, <a href="../symbols/GraphObject.html#name" class="linkProperty">name</a>, <a href="../symbols/GraphObject.html#None" class="linkConstant">None</a>, <a href="../symbols/GraphObject.html#opacity" class="linkProperty">opacity</a>, <a href="../symbols/GraphObject.html#panel" class="linkProperty">panel</a>, <a href="../symbols/GraphObject.html#part" class="linkProperty">part</a>, <a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a>, <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a>, <a href="../symbols/GraphObject.html#position" class="linkProperty">position</a>, <a href="../symbols/GraphObject.html#row" class="linkProperty">row</a>, <a href="../symbols/GraphObject.html#rowSpan" class="linkProperty">rowSpan</a>, <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a>, <a href="../symbols/GraphObject.html#segmentFraction" class="linkProperty">segmentFraction</a>, <a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">segmentIndex</a>, <a href="../symbols/GraphObject.html#segmentOffset" class="linkProperty">segmentOffset</a>, <a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">segmentOrientation</a>, <a href="../symbols/GraphObject.html#shadowVisible" class="linkProperty">shadowVisible</a>, <a href="../symbols/GraphObject.html#stretch" class="linkProperty">stretch</a>, <a href="../symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a>, <a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a>, <a href="../symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">toLinkableDuplicates</a>, <a href="../symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">toLinkableSelfNode</a>, <a href="../symbols/GraphObject.html#toMaxLinks" class="linkProperty">toMaxLinks</a>, <a href="../symbols/GraphObject.html#toolTip" class="linkProperty">toolTip</a>, <a href="../symbols/GraphObject.html#toShortLength" class="linkProperty">toShortLength</a>, <a href="../symbols/GraphObject.html#toSpot" class="linkProperty">toSpot</a>, <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">Uniform</a>, <a href="../symbols/GraphObject.html#UniformToFill" class="linkConstant">UniformToFill</a>, <a href="../symbols/GraphObject.html#Vertical" class="linkConstant">Vertical</a>, <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>, <a href="../symbols/GraphObject.html#width" class="linkProperty">width</a></dd> </dl>  <dl class="inheritsList"> <dt>Methods borrowed from class <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>: </dt><dd><a href="../symbols/GraphObject.html#bind" class="linkMethod">bind</a>, <a href="../symbols/GraphObject.html#copy" class="linkMethod">copy</a>, <a href="../symbols/GraphObject.html#getDoc