📄 placing.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Placing the editor on a web page</title>
<link REL ="stylesheet" TYPE="text/css" HREF="stylesheet.css" TITLE="Style">
</head>
<script language="javascript" src="../applet/applet.js"></script>
<body>
<a href="./index.htm">CONTENTS</a>
<h3>
Placing the editor on a web page.</h3>
<p>The editor consists of 7 related applets packed in a single archive. Here is the list of the applets:</p>
<table BORDER >
<tr>
<td><a href="#DrawCanvas">Drawing Canvas</a></td>
<td>Represents the drawing area</td>
</tr>
<tr>
<td><a href="#Tool">Tool Panel</a></td>
<td>Contains the buttons for choosing a drawing tool</td>
</tr>
<tr>
<td><a href="#Color">Color Panel</a></td>
<td>Contains the buttons for choosing a drawing color</td>
</tr>
<tr>
<td><a href="#Pen">Pen Panel</a></td>
<td>Contains the buttons for choosing a drawing pen</td>
</tr>
<tr>
<td><a href="#System">System Panel</a></td>
<td>Contains the buttons: "Clear", "Undo", "Redo", "Save"</td>
</tr>
<tr>
<td><a href="#ClipArt">ClipArt Panel</a></td>
<td>Contains the buttons with clip arts that can be inserted in the drawing</td>
</tr>
<tr>
<td><a href="#Font">Font Panel</a></td>
<td>Contains the controls for choosing a font for the text tool.</td>
</tr>
</table>
<p>Each of the applets can be placed and arranged at the web page separately.
<a href="#DrawCanvas">Drawing Canvas</a> is the only required applet.
Other applets are placed on the page if necessary. For example: if you don't have clip arts
you need't place the <a href="#clipart">ClipArt panel</a> on the page;
or if you don't use <a href="#Color">Color Panel</a> then all drawing will be
made in black color.<br>
The rest of this section describes each of the applets individually.</p>
<p><a NAME="DrawCanvas"></a><b>Drawing Canvas</b></p>
<p>Draw Canvas represents the drawing area. Place it on the web page using the following code:</p>
<pre>
<applet width="600" height="150" code="DrawCanvas.class" archive="painter.jar" name="canvas" >
<param name="bgcolor" value="#ffe0e0">
</applet>
</pre>
This HTML code gives the following result:
<font size="-1">(you can draw just here)</font></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 applet = new Applet();
applet.attr['archive'] = 'painter.jar';
applet.attr['codebase'] = '../applet';
applet.attr['code'] = 'DrawCanvas.class';
applet.attr['name'] = 'canvas';
applet.attr['width'] = 600;
applet.attr['height'] = 150;
applet.param['bgcolor'] = '#ffe0e0';
applet.write();
//--></script>
</p>
The attributes <b>width</b> and <b>height</b> define both the area that DrawCanvas occupies on the web page
and the image size.
<p>The applet can accept the following parameters:</p>
<table border="1">
<tr>
<td VALIGN=TOP><b>name</b></td>
<td><b>value</b></td>
<td><b>status</b></td>
</tr>
<tr>
<td>load</td>
<td>URL of a PNG, JPEG or GIF image at the server. Image is displayed just after the start.
See <a href="loading.htm#link">Image loading for more details</a></td>
<td>optional</td>
</tr>
<tr>
<td VALIGN=TOP>image</td>
<td>Embedded PNG or JPEG or GIF encoded by <a href="base64.htm">BASE64</a>
method. Image is displayed just after start.
See <a href="loading.htm#embed">Image loading</a> for more details</td>
<td>optional</td>
</tr>
<tr>
<td>bgload</td>
<td>URL of a background image (PNG or GIF or JPEG). The image background is used instead of the default
solid background, for example if the user uses the eraser tool, pieces of the background image are
transferred to corresponding parts of the main drawing.
</td>
<td>optional</td>
</tr>
<tr>
<td>bgimage</td>
<td>A background image (PNG or GIF or JPEG) <a href="base64.htm">BASE64</a> encoded and passed as the value of this parameter.</td>
<td>optional</td>
</tr>
<tr>
<td>loadfilter</td>
<td>Allows to define an image filter to filter the image at startup.
See the section <a href="loadfilters.htm">Custom Load Filters</a> for details.</td>
<td>optional</td>
</tr>
<tr>
<td>pageid</td>
<td>A unique identifier that helps to control image caching. See <a href="loading.htm#imagecache">image caching</a> for details.</td>
<td>optional</td>
</tr>
<tr>
<td>snap</td>
<td>Bounds mouse clicks with nodes of invisible grid while drawing lines, rectangles, and ellipses.
The snap mode is helpful for fulfilling accurate sketches.
The parameter's value may be any reasonable positive integer, for example 10.
</a></td>
<td>optional</td>
</tr>
<tr>
<td><a name="#save_format">save_format</a></td>
<td>Graphic format for image saving. Possible values are PNG, JPEG, GIF</td>
<td>default PNG</td>
</tr>
<tr>
<td>jpeg_quality</td>
<td>Image quality if the image is saved in JPEG format. The value can be integer in the range 1..100</td>
<td>default 75</td>
</tr>
<tr>
<td>thumbnail</td>
<td>If this parameter is specifeid the editor uploads (posts) the image's thumbnail along with the main image.
The parameter's value must specify the thumbnail size as "width,height". Thumbnail is uploaded as the field "thumbnail".</td>
<td>optional</td>
</tr>
<tr>
<td>undo_buffer</td>
<td>Maximum number of steps for Undo/Redo buffer. Less values are preferable for large images.
For example it's recommended to set this parameter 3 if you load images 800x600 or larger.</td>
<td>default 3</td>
</tr>
<tr>
<td>bgcolor</td>
<td>Sets the background color of the image. Affect on the color that is used by the Eraser tool and the Clear button.</td>
<td>default #FFFFFF</td>
</tr>
<tr>
<td>blockunchanged</td>
<td>If this parameter is set the editor prevents the user from accidental saving empty or unchanged image.
The parameter's value can be any text. This text is displayed in the browser's status line when the user
tries to perform such saving.</td>
<td> </td>
</tr>
<tr>
<td>measure_show</td>
<td>Turns on displaying of lengths and areas. See <a href="measuring.htm">Measuring lengths and areas</a> for details</td>
<td>optional</td>
</tr>
<tr>
<td>measure_scale</td>
<td>Defines measuring scale. See <a href="measuring.htm">Measuring lengths and areas</a> for details</td>
<td>optional</td>
</tr>
<tr>
<td>measure_format</td>
<td>Defines measuring format. See <a href="measuring.htm">Measuring lengths and areas</a> for details</td>
<td>optional</td>
</tr>
</table>
<p>The DrawCanvas applet has some functions which can be used in JavaScript.
See the section <a href="pubfuncs.htm">Public functions</a> for details.</p>
<p><b>How to scroll the Drawing Canvas.</b></p>
<p>Drawing Canavas hasn't built-in scroll capabilities however you can use DHTML to achieve this effect.<br>
See the section <a href="scroll.htm">Scrolling the canvas</a> for details.</p>
<p> </p>
<p><a NAME="Tool"></a><b>Tool Panel</b></p>
<p>Tool Panel displays the buttons that allow to choose a drawing tool.<br>
Hre is an example of placing Tool Panel:</p>
<pre><applet code="ControlPanel.class" archive="painter.jar" width="260" height="52" >
<param name="rows" value="2">
<param name="columns" value="10">
<param name="tools" value="curve,line,arrow1, rect,round_rect, oval,polyline, select_rect,select_polygon,select_area,
area,arrow2,arrow3, rect_filled,round_rect_filled, oval_filled,polygon, flood_fill,eraser,text" >
<param name="hints" value="curve, line, arrow, rectangle, rounded rectangle,
oval, polyline, select rectangle, select polygon, select area,
filled area, dimension line, path line, filled rectangle,
rounded filled rectangle, filled oval, filled polygon, flood fill, eraser, text" >
</applet>
</pre>
<p>The result of this HTML code looks as:</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'] = 260;
painter.attr['height'] = 52;
painter.param['rows'] = 2;
painter.param['columns'] = 10;
painter.param['tools'] =
'curve,line,arrow1, rect,round_rect, oval,polyline, select_rect,select_polygon,select_area,'+
'area,arrow2,arrow3, rect_filled,round_rect_filled, oval_filled,polygon, flood_fill,eraser,text';
painter.param['hints'] = 'curve, line, arrow, rectangle, rounded rectangle, oval, polyline, select rectangle,'
+'select polygon, select area, filled area, dimension line, path line, filled rectangle,'
+'rounded filled rectangle, filled oval, filled polygon, flood fill, eraser, text';
painter.param['bgcolor'] = '#EFEFFF';
painter.write();
//--></script>
<p>Tool 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>tools</td>
<td>comma delimited list of tools (codes) to be displayed</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 (tool code)</td>
<td>optional</td>
</tr>
<tr>
<td>hints</td>
<td>hint labels for buttons - comma delimited list</td>
<td>optional</td>
</tr>
</table>
<p>The tools are displayed in the order they are listed in the <b>tools</b> parameter.
The example above lists all the available tools.
You can replace the tool icons with your own.
For this read the section <a href="icons.htm">Creating custom icons</a></p>
</p><a href="customtools.htm">How to define custom tools</a></p>
<p><a NAME="Color"><b>Color Panel</b></a></p>
<p>Color Panel displays the buttons that allow to choose a drawing color.<br>
An example of creating Color Panel:</p>
<pre><applet code="ControlPanel.class" codebase="../applet" archive="painter.jar" width="160" height="20" >
<param name="columns" value="8">
<param name="colors" value="#000000,#FFFFFF,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF" >
<param name="default" value="#000000">
</applet></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'] = 160;
painter.attr['height'] = 20;
painter.param['rows'] = '1';
painter.param['columns'] = '8';
painter.param['colors'] = '#000000,#FFFFFF,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF';
painter.param['default'] = '#000000';
painter.param['bgcolor'] = '#EFEFFF';
painter.write();
//--></script>
</p>
<p>Color 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>colors</td>
<td>comma delimited list of colors as #RRGGBB</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>bgcolor</td>
<td>background color for the panel</td>
<td>default is #C0C0C0</td>
</tr>
<tr>
<td>default</td>
<td>color button pressed at startup as #RRGGBB</td>
<td>optional</td>
</tr>
</table>
<p><a NAME="Pen"><b>Pen Panel</b></a></p>
<p>Pen Panel displays buttons that allow to choose a drawing pen.
An example:</p>
<pre><applet code="ControlPanel.class" codebase="../applet" archive="painter.jar" width="240" height="20">
<param name="columns" value="12">
<param name="pens" value="thin, thick_rect1, thick_rect2, thick_rect3, thick_round1,
thick_round2, pen_up_right, pen_down_right, spray, pale, dotted_thin, dotted_thick">
</applet></pre>
<p>The result:</p>
<p>
<script language="javascript"><!--
// We use JavaScript to output the applet tag
// due to the IE security issue descibed here:
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -