The Canvas GUI scene displays only the drawing canvas. To use it specify the applet parameter:
<param name="gui" value="canvas.gui">
The necessary controls (such as tool buttons, color chooser, etc.) can be implemented in HTML and JavaScript.
To set the current canvas mode (tool,color,stroke,texture,font) or execute an action (clear,undo,redo,save,etc.)
your JavaScript code has to call the painter's functions
setMode(mode) or
doAction(action).
|
Example This example is simple and shows just the idea. |
HTML and JavaScript Code
<form>
<input type="button" value="Clear" onclick="doAction('clear')">
<input type="button" value="Undo" onclick="doAction('undo')">
<input type="button" value="Redo" onclick="doAction('redo')">
Tool:
<select onchange="setMode(this.options[this.selectedIndex].value)">
<option value="tool:curve">Curve</option>
<option value="tool:line">Line</option>
<option value="tool:arrow">Arrow</option>
<option value="tool:rect">Rectangle</option>
<option value="tool:eraser">Eraser</option>
</select>
</form>
<applet name="painter_applet" codebase="../applet" code="Painter.class"
archive="painter.jar,res.zip" width="402" height="302" >
<param name="gui" value="canvas.gui">
<param name="image_width" value="400" >
<param name="image_height" value="300" >
<!-- necessary for java Plugin2 -->
<param name="jnlp_href" value="plugin2.jnlp">
<param name="codebase_lookup" value="false">
</applet>
<script language="javascript">
function setMode(mode) {
var painter = document.applets['painter_applet'];
painter.setMode(mode);
}
function doAction(action) {
var painter = document.applets['painter_applet'];
painter.doAction(action);
}
</script>
|