placing.htm

applet在線上繪圖,允許在瀏覽器上繪圖,最後儲存成各式的圖檔

  // http://izhuk.com/docs/ie7fix.html

  var painter = new Applet();
  painter.attr['archive']  = 'painter.jar';
  painter.attr['codebase'] = '../applet';

  painter.attr['code']   = 'ControlPanel.class';
  painter.attr['width']  = 240;
  painter.attr['height'] = 20;
  
  painter.param['rows']    = 1;
  painter.param['columns'] = 12;
  painter.param['pens']    = 'thin, thick_rect1, thick_rect2, thick_rect3, thick_round1,'+
     'thick_round2, pen_up_right, pen_down_right, spray, pale, dotted_thin, dotted_thick';
  painter.param['bgcolor'] = '#EFEFFF'; 
  
  painter.write();
//--></script>
</p>

Pen Panel accepts the following parameters:
<table BORDER >
<tr>
<td><b>name</b></td>
<td><b>value</b></td>
<td><b>status</b></td>
</tr>

<tr>
<td>pens</td>
<td>comma delimited list pen codes</td>
<td>required</td>
</tr>

<tr>
<td>icondir</td>
<td>directory of tool icons</td>
<td>default is the directory 'icons'</td>
</tr>

<tr>
<td>rows</td>
<td>number of rows to arrange buttons</td>
<td>default is 1</td>
</tr>

<tr>
<td>columns</td>
<td>number of columns to arrange buttons</td>
<td>default is 1</td>
</tr>

<tr>
<td>bgcolor</td>
<td>background color for the panel</td>
<td>default is #C0C0C0</td>
</tr>

<tr>
<td>default</td>
<td>button pressed at startup (pen code)</td>
<td>optional</td>
</tr>
</table>

<p>The pens are displayed in order they are listed in the <b>pens</b> parameter.
   The example above lists all the available pens.</p>

<p><a NAME="System"><b>System Panel</b></a></p>
<p>System Panel displays "Clear", "Undo", "Redo", "Save" buttons.<br>
An example of using System panel:</p>

<pre>&lt;applet code="ControlPanel.class" codebase="../applet" archive="painter.jar" width="210" height="30" &gt;
&nbsp;&nbsp;&nbsp; &lt;param name="columns" value="7"&gt;
&nbsp;&nbsp;&nbsp; &lt;param name="system" value="clear,undo,redo,save,print,rotate_clipart_left,rotate_clipart_right"&gt;
&nbsp;&nbsp;&nbsp; &lt;param name="hints" value="clear,undo,redo,save,print,rotate clipart left,rotate clipart right"&gt;
&nbsp;&nbsp;&nbsp; &lt;param name="save" value="upload.php"&gt;
&lt;/applet&gt;</pre>

<p>The result of this code is:</p>
<p>
<script language="javascript"><!--
  // We use JavaScript to output the applet tag
  // due to the IE security issue descibed here:
  // http://izhuk.com/docs/ie7fix.html

  var painter = new Applet();
  painter.attr['archive']  = 'painter.jar';
  painter.attr['codebase'] = '../applet';

  painter.attr['code']   = 'ControlPanel.class';
  painter.attr['width']  = 210;
  painter.attr['height'] = 30;
  
  painter.param['rows']    = 1;
  painter.param['columns'] = 7;
  painter.param['system'] = 'clear,undo,redo,save,print,rotate_clipart_left,rotate_clipart_right';
  painter.param['hints']  = 'clear,undo,redo,save,print,rotate clipart left,rotate clipart right';
  painter.param[''] = '';

  painter.param['bgcolor'] = '#EFEFFF'; 
  
  painter.write();
//--></script>
</p>

System Panel accepts the following parameters:
<table BORDER >
<tr>
<td><b>name</b></td>
<td><b>value</b></td>
<td><b>status</b></td>
</tr>

<tr>
<td>system</td>
<td>comma delimited list of system button codes</td>
<td>required</td>
</tr>

<tr>
<td>rows</td>
<td>number of rows to arrange buttons</td>
<td>default is 1</td>
</tr>

<tr>
<td>columns</td>
<td>number of columns to arrange buttons</td>
<td>default is 1</td>
</tr>

<tr>
<td>icondir</td>
<td>directory of tool icons</td>
<td>default is the directory 'icons'</td>
</tr>

<tr>
<td>save</td>
<td>URL of the image saving script. See <a href="saving.htm#upload">Saving image</a></td>
<td>optional</td>
</tr>

<tr>
<td>progresstext</td>
<td>text to be displayed while saving is in progress</td>
<td>optional</td>
</tr>

<tr>
<td>progresscolor</td>
<td>color of the progress text</td>
<td>default is black</td>
</tr>

<tr>
<td>bgcolor</td>
<td>background color for the panel</td>
<td>default is #C0C0C0</td>
</tr>

<tr>
<td>hints</td>
<td>hint labels for buttons - comma delimited list</td>
<td>optional</td>
</tr>

</table>

<p>The buttons are displayed in order they are listed in the <b>system</b> parameter.
The example above lists all the available buttons.</br>
<b>Caution:</b> The "print" function doesn't work on Microsift's Java engine.</p>

<p><a NAME="ClipArt"></a><b>ClipArt Panel</b></p>
<p>ClipArt panel displays a set of images that can be placed on the drawing. The image files (GIF or JPEG) should be kept
on the server in a subdirectory of the applet's directory. The subdirectory should be specified by the paremeter "icondir".</p>

<p>An example:</p>

<pre>&lt;applet code="ControlPanel.class" archive="painter.jar" width="288" height="48" &gt;
&nbsp;&nbsp;&nbsp; &lt;param name="columns" value="6"&gt;
&nbsp;&nbsp;&nbsp; &lt;param name="clips" value="flower.jpg,cherry.jpg,ladybird.jpg,carrot.jpg,apple.jpg,photo1.jpg" &gt;
&nbsp;&nbsp;&nbsp; &lt;param name="icondir" value="clipart/"&gt;
&nbsp;&nbsp;&nbsp; &lt;param name="outline" value="false"&gt;
&nbsp;&nbsp;&nbsp; &lt;param name="insertat" value="0,0"&gt;
&lt;/applet&gt;</pre>

<p>The result of this code is:<br>

<table border="0" width="100%" cellpadding="8" ><tr>
<td>
<script language="javascript"><!--
  // We use JavaScript to output the applet tag
  // due to the IE security issue descibed here:
  // http://izhuk.com/docs/ie7fix.html

  var painter = new Applet();
  painter.attr['archive']  = 'painter.jar';
  painter.attr['codebase'] = '../applet';

  painter.attr['code']   = 'ControlPanel.class';
  painter.attr['width']  = 288;
  painter.attr['height'] = 48;
  
  painter.param['rows']    = 1;
  painter.param['columns'] = 6;
  painter.param['icondir'] = 'clipart/';
  painter.param['clips'] = 'flower.gif,cherry.gif,ladybird.gif,carrot.gif,apple.gif,photo1.jpg';
  painter.param['insertat'] = '0,0';
  painter.param['outline'] = 'false';
  painter.param['bgcolor'] = '#EFEFFF'; 
  
  painter.write();
//--></script>
</td>

<td align="right">
</td>

</tr></table>

</p>

The ClipArt Panel accepts the following parameters:
<table BORDER >
<tr>
<td><b>name</b></td>
<td><b>value</b></td>
<td><b>status</b></td>
</tr>

<tr>
<td>clips</td>
<td>comma delimited list of image files (JPEG or GIF)</td>
<td>required</td>
</tr>

<tr>
<td>icondir</td>
<td>the directory with the clip art files</td>
<td>default is the applet's directory</td>
</tr>

<tr>
<td>rows</td>
<td>number of rows to arrange buttons</td>
<td>default is 1</td>
</tr>

<tr>
<td>columns</td>
<td>number of columns to arrange buttons</td>
<td>default is 1</td>
</tr>

<tr>
<td>bgcolor</td>
<td>background color for the panel</td>
<td>default is #C0C0C0</td>
</tr>

<tr>
<td valign="top">insertat</td>
<td>Specifies the initial point to insert clip arts on the canvas. The insertion point must be specified
as x,y coordinates (separated by comma). After inserting a clip art the user can move and resize it.
If the parameter is not specified, the user can only move the clipart over the canvas and drop it to a point.
</td>
<td>&nbsp;</td>
</tr>

<tr>
<td valign="top">tile</td>
<td>If the user resizes a clipart on the canvas it is scaled. This is the default behaviour. However
you can specify a particular clip art to be tiled, thus using it as a pattern sample. Use this
parameter to list names of clip art files that should be tiled.
</td>
<td>default scale</td>
</tr>

<tr>
<td valign="top">colorable</td>
<td>Normally the user may not change clip art colors. However you can specify that some of the cliparts
can be colored. Use this parameter to specify what clip arts from the main list can be colored.
In that case the editor changes black color of the basic clipart to the current drawing color.
</td>
<td>default scale</td>
</tr>

<tr>
<td>outline</td>
<td>if set to <b>false</b> the clip art buttons on the panel are not outlined.</td>
<td>default true</td>
</tr>

</table>

<p>Notes:</p>

<ul>    
  <li>If dimensions of a clip art image is larger then it's host button the image is scaled to fit the buttons dimensions.
      The image's proportion is kept. Regardless of the the image dimensions the image is inserted on the DrawCanvas
      as is, i.e. it's original size is kept.
      <br>&nbsp;
  </li>

  <li>If you wouldn't like an image to be scaled on the button (for example to avoid some scaling distortion)
      keep dimensions of the original image less then dimensions of it's host button by 6 pixels if the buttons
      have outline and by 1 pixel if the buttons are not outlined.
      <br>&nbsp;
  </li>
  
</ul>

<p><a NAME="Font"><b>Font Panel</b></a></p>
<p>Font Panel allows the user to choose font of the text tool. Also it allows to specify the text alignment and
background shape.<br>
Use the followig code to place FontPanel on the web page:</p>

<pre>&lt;applet code="FontPanel.class" codebase="../applet" archive="painter.jar" width="360" height="30" &gt;
	&lt;param name="controls" value="font_faces,font_sizes,font_styles,text_alignment,callout_shapes"&gt;
	&lt;param name="font_faces" value="Serif,SansSerif,Monospaced"&gt;
	&lt;param name="font_sizes" value="10,12,16,24"&gt;
	&lt;param name="default" value="SansSerif-bold-12"&gt;
	&lt;param name="bgcolor" value="#EFEFFF"&gt;
&lt;/applet&gt;
</pre>

<p>The result of this example code is:</p>
<p>
<script language="javascript"><!--
  // We use JavaScript to output the applet tag
  // due to the IE security issue descibed here:
  // http://izhuk.com/docs/ie7fix.html

  var painter = new Applet();
  painter.attr['archive']  = 'painter.jar';
  painter.attr['codebase'] = '../applet';

  painter.attr['code']   = 'FontPanel.class';
  painter.attr['width']  = 360;
  painter.attr['height'] = 30;
  
  painter.param['controls'] = 'font_faces,font_sizes,font_styles,text_alignment,callout_shapes';
  painter.param['font_faces'] = 'Serif,SansSerif,Monospaced';
  painter.param['font_sizes'] = '10,12,16,24';
  painter.param['default']    = 'SansSerif-bold-12';

  painter.param['bgcolor'] = '#EFEFFF'; 
  
  painter.write();
//--></script>
</p>

<p>Font Panel accepts the following parameters:</p>
<table BORDER >
<tr>
<td><b>name</b></td>
<td><b>value</b></td>
<td><b>status</b></td>
</tr>

<tr>
<td valign="top">controls</td>
<td>Specifies what controls to show on the panel. The following controls are available:
    <pre>font_faces,&nbsp;font_sizes,&nbsp;font_styles,&nbsp;text_alignment,&nbsp;callout_shapes.</pre>
    The specified controls are displayed in the order they are listed.</td>
<td>By default <code>font_faces, font_sizes, font_styles</code> are displayed</td>
</tr>

<tr>
<td>font_faces</td>
<td>comma delimited list of font names (see the note below)</td>
<td>optional</td>
</tr>

<tr>
<td>font_sizes</td>
<td>comma delimited list of font sizes</td>
<td>optional</td>
</tr>

<tr>
<td valign="top">align_controls</td>
<td>specifies how to align the controls. The parameter value can be one of the follwing: left, center, right</td>
<td>default 'left'</td>
</tr>

<tr>
<td valign="top">callout_bgcolor</td>
<td>Specifies the background color of the text. The value should be in the format #RRGGBB</td>
<td>default #FFFFFF</td>
</tr>

<tr>
<td>default</td>
<td>The default font specified as: family-style-size. Valid styles are: "plain", "bold", "italic", and "bolditalic".
For example: SansSerif-bold-12</td>
<td>if not specified the first font from the list is used</td>
</tr>

<tr>
<td>icondir</td>
<td>directory of tool icons</td>
<td>default is the directory 'icons'</td>
</tr>

<tr>
<td>bgcolor</td>
<td>background color for the panel</td>
<td>default is #C0C0C0</td>
</tr>

</table>

<p><b>A note on font faces:</b></p>
<p>Font faces can be specified by the parameter "font_faces". You can specify any font names, but you should keep in mind
that actually available font set depends on the user's platform. Only the following logical font names are supported
certainly: Serif, SansSerif, Monospaced. If you don't specify the parameter "font_faces" the Font Panel tries
to detect the available fonts. If you specify a font that doesn't exist on the target platform the default font
is used instead (usually it's "Dialog").
<hr>

</body>
</html>