📄 ch21_12.htm
字号:
<html><head><title>The Canvas Widget (Perl in a Nutshell, 2nd Edition)</title><link rel="stylesheet" type="text/css" href="../style/style1.css" /><meta name="DC.Creator" content="Stephen Spainhour" /><meta name="DC.Format" content="text/xml" scheme="MIME" /><meta name="DC.Language" content="en-US" /><meta name="DC.Publisher" content="O'Reilly & Associates, Inc." /><meta name="DC.Source" scheme="ISBN" content="0596002416L" /><meta name="DC.Subject.Keyword" content="stuff" /><meta name="DC.Title" content="Perl in a Nutshell, 2nd Edition" /><meta name="DC.Type" content="Text.Monograph" /></head><body bgcolor="#ffffff"><img src="gifs/smbanner.gif" usemap="#banner-map" border="0" alt="Book Home" /><map name="banner-map"><area shape="rect" coords="1,-2,616,66" href="index.htm" alt="Java and XSLT" /><area shape="rect" coords="629,-11,726,25" href="jobjects/fsearch.htm" alt="Search this book" /></map><div class="navbar"><table width="684" border="0"><tr><td align="left" valign="top" width="228"><a href="ch21_11.htm"><img src="../gifs/txtpreva.gif" alt="Previous" border="0" /></a></td><td align="center" valign="top" width="228" /><td align="right" valign="top" width="228"><a href="ch21_13.htm"><img src="../gifs/txtnexta.gif" alt="Next" border="0" /></a></td></tr></table></div><h2 class="sect1">21.12. The Canvas Widget</h2><p><a name="INDEX-2993" /><a name="INDEX-2994" /><a name="INDEX-2995" />Create a canvas for drawing with the<tt class="literal">Canvas</tt> method. The Canvas widget uses a coordinatesystem with the x coordinate increasing as you move right, and the ycoordinate increasing as you move down (i.e., the y coordinate ismathematically upside-down). The x and y coordinates are specified inpixels by default.</p><blockquote><pre class="code">$parentwidget->Canvas (<em class="replaceable"><tt>options</tt></em>)</pre></blockquote><p>The standard configuration options that apply to<tt class="literal">Canvas</tt> are: <tt class="literal">-background</tt>,<tt class="literal">-bor</tt>-<tt class="literal">derwidth</tt>,<tt class="literal">-cursor</tt>, <tt class="literal">-height</tt>,<tt class="literal">-highlightbackground</tt>,<tt class="literal">-highlightcolor</tt>,<tt class="literal">-highlight</tt>-<tt class="literal">thickness</tt>,<tt class="literal">-insertbackground</tt>,<tt class="literal">-insertborderwidth</tt>,<tt class="literal">-insertofftime</tt>,<tt class="literal">-inserton</tt>-<tt class="literal">time</tt>,<tt class="literal">-insertwidth</tt>, <tt class="literal">-relief</tt>,<tt class="literal">-selectbackground</tt>,<tt class="literal">-selectborderwidth</tt>,<tt class="literal">-selectfore</tt>-<tt class="literal">ground</tt>,<tt class="literal">-state</tt>, <tt class="literal">-takefocus</tt>,<tt class="literal">-width</tt>, <tt class="literal">-xscrollcommand</tt>, and<tt class="literal">-yscrollcommand</tt>.</p><p>Other options are:</p><dl><dt><b><tt class="literal">-closeenough =></tt> <em class="replaceable">amount</em></b></dt><dd><a name="INDEX-2996" />The distance considered"close enough" to an item to bejudged to be within it. Default is 1 pixel.</p></dd><dt><b><tt class="literal">-confine =></tt> <em class="replaceable">boolean</em></b></dt><dd><a name="INDEX-2997" />Whether to limit the canvas to thescroll region. Default is <tt class="literal">1</tt>.</p></dd><dt><b><tt class="literal">-scrollregion => [</tt> <em class="replaceable">x, y, w, h</em> <b class="emphasis-bold">]</b></b></dt><dd><a name="INDEX-2998" />Sets the region that the user isallowed to scroll. The option is a list reference that convenientlycorresponds to the return value of the <tt class="literal">bbox</tt>method.</p></dd><dt><b><tt class="literal">-xscrollincrement =></tt> <em class="replaceable">amount</em></b></dt><dd><a name="INDEX-2999" />Thedistance to use for scrolling in the x direction.</p></dd><dt><b><tt class="literal">-yscrollincrement =></tt> <em class="replaceable">amount</em></b></dt><dd><a name="INDEX-3000" />Thedistance to use for scrolling in the y direction.</p></dd></dl><a name="perlnut2-CHP-21-SECT-12.1" /><div class="sect2"><h3 class="sect2">21.12.1. Canvas Creation Methods</h3><p>To place graphic elements in a canvas, there are several itemcreation methods:</p><dl><dt><b><tt class="literal">createArc</tt> </b></dt><dd><a name="INDEX-3001" />Creates an arc contained within thegiven bounding box. For example, to create an oval bounded by the boxfrom (0,0) to (40,100):</p><blockquote><pre class="code">$canvas->createArc(0,0,40,100, -extent => 360);</pre></blockquote><p>The <tt class="literal">-extent</tt> option gives a number between 0 and360 defining the length of the arc. The default<tt class="literal">-extent</tt> is <tt class="literal">90</tt>, or 1/4 of anoval; an extent of <tt class="literal">360</tt> gives you a full oval. Thecomplete list of options to <tt class="literal">createArc</tt> is:</p><dl><dt><i> <tt class="literal">-extent =></tt> <em class="replaceable"><tt>degrees</tt></em></i></dt><dd>Creates an arc of the specified extent.<em class="replaceable"><tt>degrees</tt></em> can be any number between 0 and360, as described above.</p></dd><dt><i> <tt class="literal">-fill =></tt> <em class="replaceable"><tt>color</tt></em></i></dt><dd>Fills the arc with the specified color.</p></dd><dt><i> <tt class="literal">-outline =></tt> <em class="replaceable"><tt>color</tt></em></i></dt><dd>Draws the arc with the specified color (default is<tt class="literal">black</tt>).</p></dd><dt><i> <tt class="literal">-outlinestipple =></tt> <em class="replaceable"><tt>bitmap</tt></em></i></dt><dd>Draws the outline with the specified bitmap pattern.</p></dd><dt><i> <tt class="literal">-start =></tt> <em class="replaceable"><tt>degrees</tt></em></i></dt><dd>Starts drawing the arc from the specified position, which isrepresented by a number from 0 to 360. The default is<tt class="literal">0</tt>, which means to start drawing at the 3o'clock position.</p></dd><dt><i> <tt class="literal">-stipple =></tt> <em class="replaceable"><tt>bitmap</tt></em></i></dt><dd>Uses the specified bitmap to fill the arc (if<tt class="literal">-fill</tt> is also specified).</p></dd><dt><i> <tt class="literal">-style =></tt> <em class="replaceable"><tt>type</tt></em></i></dt><dd>Draws the arc as specified. Values are:</p><dl><dt><i> <tt class="literal">pieslice</tt></i></dt><dd>Draws lines from the center to the ends of the arc (the default)</p></dd><dt><i> <tt class="literal">chord</tt></i></dt><dd>Draws a line connecting the two ends of the arc</p></dd><dt><i> <tt class="literal">arc</tt></i></dt><dd>Draws the arc with no other lines</p></dd></dl></dd><dt><i> <tt class="literal">-tags =></tt> <em class="replaceable"><tt>tagnames</tt></em></i></dt><dd>Associates the arc with the specified tag(s). Multiple tag names canbe supplied as an anonymous list.</p></dd><dt><i> <tt class="literal">-width =></tt> <em class="replaceable"><tt>amount</tt></em></i></dt><dd>The width of the outline. Default is <tt class="literal">1</tt>.</p></dd></dl></dd><dt><b><tt class="literal">createBitmap</tt></b></dt><dd><a name="INDEX-3002" />Inserts a bitmap. For example, to placethe <tt class="literal">calculator</tt> bitmap at the (0,0) coordinates:</p><blockquote><pre class="code">$canvas -> createBitmap(0, 0, -bitmap => 'calculator');</pre></blockquote><p>Options are:</p><dl><dt><i> <tt class="literal">-anchor =></tt> <em class="replaceable"><tt>position</tt></em></i></dt><dd>Anchors the bitmap at the specified position. Values are<tt class="literal">center</tt> (default), <tt class="literal">n</tt>,<tt class="literal">e</tt>, <tt class="literal">s</tt>, <tt class="literal">w</tt>,<tt class="literal">ne</tt>, <tt class="literal">nw</tt>, <tt class="literal">se</tt>,and <tt class="literal">sw</tt>.</p></dd><dt><i> <tt class="literal">-background =></tt> <em class="replaceable"><tt>color</tt></em></i></dt><dd>Specifies the color to use for the 0 pixels in the bitmap (default isto be transparent).</p></dd><dt><i> <tt class="literal">-bitmap =></tt> <em class="replaceable"><tt>bitmap</tt></em></i></dt><dd>Specifies the bitmap name. For a built-in bitmap, just specify thename; for a local bitmap file, specify the name with an<tt class="literal">@</tt> preceding it.</p></dd><dt><i> <tt class="literal">-foreground =></tt> <em class="replaceable"><tt>color</tt></em></i></dt><dd>Specifies the color to use for the 1 pixel in the bitmap (default is<tt class="literal">black</tt>).</p></dd><dt><i> <tt class="literal">-tags =></tt> <em class="replaceable"><tt>tagnames</tt></em></i></dt><dd>Associates the bitmap with the specified tag(s). Multiple tag namescan be supplied as an anonymous list.</p></dd></dl></dd><dt><b><tt class="literal">createImage</tt></b></dt><dd><a name="INDEX-3003" />Creates an image. For example, to placean image at (0,0):</p><blockquote><pre class="code">$canvas->createImage(0,0, -image => $imgptr);</pre></blockquote><p>Options are:</p><dl><dt><i> <tt class="literal">-anchor =></tt> <em class="replaceable"><tt>position</tt></em></i></dt><dd>Anchors the image at the specified position. Values are<tt class="literal">center</tt> (default), <tt class="literal">n</tt>,<tt class="literal">e</tt>, <tt class="literal">s</tt>, <tt class="literal">w</tt>,<tt class="literal">ne</tt>, <tt class="literal">nw</tt>, <tt class="literal">se</tt>,and <tt class="literal">sw</tt>.</p></dd><dt><i> <tt class="literal">-image =></tt> <em class="replaceable"><tt>$imgptr</tt></em></i></dt><dd><em class="replaceable"><tt>$imgptr</tt></em> is a pointer to a Photo or Imageobject made using a GIF or PPM file. For example:</p><blockquote><pre class="code">$imgptr = $mainwindow->Photo(-file => "doggie.gif");</pre></blockquote></dd><dt><i> <tt class="literal">-tags =></tt> <em class="replaceable"><tt>tagnames</tt></em></i></dt><dd>Associate the image with the specified tag(s). Multiple tag names canbe supplied as an anonymous list.</p></dd></dl></dd><dt><b><tt class="literal">createLine</tt> </b></dt><dd><a name="INDEX-3004" />Creates a line or several adjoininglines. For example, to create a line from (0,0) to (100,100) and thenback to (100,0):</p><blockquote><pre class="code">$canvas->createLine (0,0,100,100,100,0);</pre></blockquote><p>The first four coordinates are required. Any additional coordinatesare taken to represent a continuation of that line. Options are:</p><dl><dt><i> <tt class="literal">-arrow =></tt> <em class="replaceable"><tt>position</tt></em></i></dt><dd>Specifies where to place arrowheads. Values are<tt class="literal">none</tt> (default), <tt class="literal">first</tt>,<tt class="literal">last</tt>, and <tt class="literal">both</tt>.</p></dd><dt><i> <tt class="literal">-arrowshape => [</tt> <em class="replaceable"><tt>head</em>, <em class="replaceable">length</em>, <em class="replaceable">flare</tt></em> <tt class="literal">]</tt></i></dt><dd>Specifies the dimensions of the arrow as a three-element anonymouslist, describing (in order) the distance from the base to the head ofthe arrow, the distance from the rear point(s) to the head of thearrow, and the distance from the rear point(s) to the line.</p></dd><dt><i> <tt class="literal">-capstyle =></tt> <em class="replaceable"><tt>type</tt></em></i></dt><dd>Defines the type of arrowhead. Values are <tt class="literal">butt</tt>(the default), <tt class="literal">projecting</tt>, and<tt class="literal">round</tt>.</p></dd><dt><i> <tt class="literal">-fill =></tt> <em class="replaceable"><tt>color</tt></em></i></dt><dd>The color to use to draw the line.</p></dd><dt><i> <tt class="literal">-joinstyle =></tt> <em class="replaceable"><tt>type</tt></em></i></dt><dd>Defines how multiple lines are joined. Values are<tt class="literal">miter</tt> (default), <tt class="literal">bevel</tt>, and<tt class="literal">round</tt>.</p></dd><dt><i> <tt class="literal">-smooth =></tt> <em class="replaceable"><tt>boolean</tt></em></i></dt><dd>Determines whether the lines are drawn with a Bezier spine. Defaultis <tt class="literal">0</tt>.</p></dd><dt><i> <tt class="literal">-splinesteps =></tt> <em class="replaceable"><tt>n</tt></em></i></dt><dd>Determines how smooth the Bezier curve is.</p></dd><dt><i> <tt class="literal">-stipple =></tt> <em class="replaceable"><tt>bitmap</tt></em></i></dt><dd>Draws the line with the specified bitmap pattern.</p></dd><dt><i> <tt class="literal">-tags =></tt> <em class="replaceable"><tt>tagnames</tt></em></i></dt><dd>Associates the line with the specified tag(s). Multiple tag names canbe supplied as an anonymous list.</p></dd>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -