template.js

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

/* 
 *
 * This code allows to prepare and output J-Painter's GUI.
 * It allow to rid the HTML page from many applet definitions,
 * and resolve the IE7 security issue (see http://izhuk.com/docs/ie7fix.html)
 *
 * Note: this code uses applet.js which can be found in the applet's directory.
 */

/* Constructs the Painter object */
function Painter(codebase) {
    this.codebase = codebase; // location of the applet files (relative to the HTML file)
    this.bgcolor = '#E0E0E0'; // background of the GUI
    this.icondir = 'icons/';  // location of icons (relative to the applet's directory - codebase)
    this.instance = (new Date()).getTime();
    this.init();
}

/* Initializes the Painter components */
Painter.prototype.init = function() {

    this.canvas = new Canvas( this, 640, 480 );
    this.canvas.noJava = 'Your browser does not support Java. Download Java now <a href="http://www.java.com">www.java.com</a>';

    this.systemPanel = new SystemPanel(this,new Array(101,104,102,103),1,4);
    this.systemPanel.param.progresstext = 'Saving the image ....';

    var tools = new Array(0, 1, 2, 4, 19, 21, 18, 3, 5, 20, 11, 9, 7, 8, 23, 14, 15);
    this.toolPanel = new ToolPanel(this, tools , tools.length, 1);

    var pens = new Array(200,211,202,213, 270,271, 263,253,223,233);
    this.penPanel = new PenPanel(this, pens, 1, pens.length);

    var fontFaces = null; // new Array('Serif','SansSerif','Monospaced','Dialog');
    var fontSizes = new Array(10,12,16,24,36,48,96);
    this.fontPanel = new FontPanel(this, fontFaces, fontSizes);

    var colors = new Array(
	0x000000,0x404040,0x808080,0xff0000,0xff3300,0xff6600,0xff9900,0xffcc00,0xffff00,0xccff00,0x99ff00,0x66ff00,0x33ff00,0x00ff00,0x00ff33,0x00ff66,0x00ff99,
	0x00ffcc,0x00ffff,0x00ccff,0x0099ff,0x0066ff,0x0033ff,0x0000ff,0x3300ff,0x6600ff,0x9900ff,0xcc00ff,0xff00ff,0xff00cc,0xff0099,0xff0066,0xff0033,

	0xffffff,0xe0e0e0,0xc0c0c0,0x800000,0x801a00,0x803300,0x804d00,0x806600,0x808000,0x668000,0x4d8000,0x338000,0x198000,0x008000,0x00801a,0x008033,0x00804c,
	0x008066,0x008080,0x006680,0x004c80,0x003380,0x001a80,0x000080,0x190080,0x330080,0x4c0080,0x660080,0x800080,0x800066,0x80004d,0x800033,0x80001a
    );
    this.colorPanel = new ColorPanel(this, colors, 2, colors.length/2);
}

/* Outputs Painter components */
Painter.prototype.write = function() {

    var canvas_align  = (parseInt(this.canvas.attr.width)  < 100) ? 'left' : 'center';
    var canvas_valign = (parseInt(this.canvas.attr.height) < 100) ? 'top'  : 'middle';

    document.write('<table bgcolor="'+this.bgcolor+'" border="1" cellspacing="0" cellspadding="0">');

    // top panel
    document.write('<tr><td>');
        writeHelp(this.codebase);
    	document.write('&nbsp;');
    	this.systemPanel.write();
    	document.write('&nbsp;&nbsp;');
    	this.fontPanel.write();
    	document.write('&nbsp;&nbsp;');
    	this.penPanel.write();
    document.write('</td></tr>');

    document.write('<tr><td>');
        document.write('<table width="100%" border="0" cellpadding="1"><tr>');
    	    document.write('<td valign="top">');
	    this.toolPanel.write();
    	    document.write('</td>');

    	    document.write('<td align="'+canvas_align+'" valign="'+canvas_valign+'">');
    	       document.write('<table border="0" cellpadding="1"><tr><td bgcolor="#000000">');
    	       this.canvas.write();
    	       document.write('</td></tr></table>');
    	    document.write('</td>');

    	document.write('</tr></table>');
    document.write('</td></tr>');

    // bottom (color) panel
    document.write('<tr><td align="center">');
    	document.write('&nbsp;');
    	this.colorPanel.write();
    document.write('</td></tr>');

    document.write('</table>');

}

function writeHelp(applet_dir) {
    document.write('<a href="javascript:void(0);" ');
    document.write('onclick="window.open(\''+applet_dir+'/help.htm\',\'help\',\'width=350, height=475\');" > ');
    document.write('<img border="0" src="'+applet_dir+'/help.gif" width="28" height="28" alt="Help"></a>');
}

function Canvas(painter, width, height) {
    var applet = new Applet();
    applet.attr.codebase = painter.codebase;
    applet.attr.archive = 'painter.jar';
    applet.attr.code = 'DrawCanvas.class';
    applet.attr.name = 'canvas';
    applet.attr.width = width;
    applet.attr.height = height;
    applet.param.instance = painter.instance;
    return applet;
}

function ControlPanel(painter, type, items, rows, cols, item_width, item_height) {
    var applet = new Applet();
    applet.attr.codebase = painter.codebase;
    applet.attr.archive = 'painter.jar';
    applet.attr.code = 'ControlPanel.class';
    applet.param.icondir = painter.icondir;
    applet.param.bgcolor = painter.bgcolor;
    applet.param.instance = painter.instance;

    applet.param[type] = '';
    for(i=0; i < items.length; i++) {
    	if (i > 0) applet.param[type] += ',';
    	applet.param[type] += items[i];
    }
    applet.param.rows = rows;
    applet.param.columns = cols;
    applet.attr.width  = item_width * cols;
    applet.attr.height = item_height * rows;
    
    return applet;
}


function ToolPanel(painter, actions, rows, cols) {
    var applet = new ControlPanel(painter,'tools',actions,rows,cols,28,28);
    return applet;
}

function ColorPanel(painter, colors, rows, cols) {
    var applet = new ControlPanel(painter,'colors',colors,rows,cols,19,19);
    delete applet.icondir;
    return applet;
}

function PenPanel(painter, pens, rows, cols) {
    var applet = new ControlPanel(painter,'pens',pens,rows,cols,19,19);
    return applet;
}

function ClipartPanel(painter,cliparts, rows, cols, clip_width, clip_height) {
    var applet = new ControlPanel(painter,'clips',cliparts, rows,cols, clip_width, clip_height);
    return applet;
}

function SystemPanel(painter, items, rows, cols) {
    var applet = new ControlPanel(painter,'system',items,rows,cols,28,28);
    return applet;
}

function FontPanel(painter, font_faces, font_sizes) {
    var applet = new Applet();
    applet.attr.codebase = painter.codebase;
    applet.attr.archive = 'painter.jar';
    applet.attr.code = 'FontPanel.class';
    applet.attr.width  = 360;
    applet.attr.height = 24;
    applet.param.bgcolor = painter.bgcolor;
    applet.param.icondir = painter.icondir;
    applet.param.instance = painter.instance;

    if (font_faces != null && font_faces.length > 0) {
      applet.param.font_faces = '';
      for(i=0; i < font_faces.length; i++) {
    	if (i > 0) applet.param.font_faces += ',';
    	applet.param.font_faces += font_faces[i];
      }
    }

    if (font_sizes != null && font_sizes.length > 0) {
      applet.param.font_sizes = '';
      for(i=0; i < font_sizes.length; i++) {
    	if (i > 0) applet.param.font_sizes += ',';
    	applet.param.font_sizes += font_sizes[i];
      }
    }
    else
        applet.param.font_sizes = '12,16,24';
    
    applet.param.text_alignment = 'left';
    
    return applet;
}

/*
 * This method retrieves BASE64 encoded image data
 */
Painter.prototype.getImage = function(format) {
    return document.applets[canvas.name].GetImage(format);
}