/canvasport.js
JavaScript | 184 lines | 159 code | 16 blank | 9 comment | 23 complexity | 8beb599541c228a46d50ba1cffaad5ca MD5 | raw file
- /* v0.1 from http://nebulos.googlecode.com/svn/trunk/%20nebulos%20--username%20leforthomas/nebulos/src/canvasport-v0.1.js */
- var canvasport = {
- createCanvas: function(container, width, height, canvasstyle)
- {
- var canvas = document.createElement("canvas");
- container.appendChild(canvas);
- canvas.style.width = width;
- canvas.style.height = height;
- // huyz 2011-09-18
- canvas.setAttribute('width', parseInt(width, 10));
- canvas.setAttribute('height', parseInt(height, 10));
- canvas.style.margin = "0px";
- canvas.style.padding = "0px";
- // add canvas for image
- if( window.G_vmlCanvasManager) {
- // excanvas hack
- window.G_vmlCanvasManager.initElement(canvas);
- }
- return canvas;
- },
- getDrawing: function(canvas)
- {
- return canvas.getContext('2d');
- },
- _fillText: function(ctx, text, posx, posy, font)
- {
- if(ctx.fillText)
- {
- ctx.font = font;
- ctx.fillText(text, posx, posy);
- } else {
- if(ctx.mozDrawText)
- {
- ctx.save();
- ctx.mozTextStyle = font;
- ctx.translate(posx, posy);
- ctx.mozDrawText(text);
- ctx.restore();
- }
- }
- },
- _strokeText: function(ctx, text, posx, posy, font)
- {
- if(ctx.strokeText)
- {
- ctx.font = font;
- ctx.strokeText(text, posx, posy);
- } else {
- if(ctx.mozDrawText)
- {
- ctx.save();
- ctx.mozTextStyle = font;
- ctx.translate(posx, posy);
- ctx.mozDrawText(text);
- ctx.restore();
- }
- }
- },
- drawText: function(ctx, text, posx, posy, vertical, font, stroke)
- {
- if(vertical)
- {
- ctx.save();
- ctx.translate(posx, posy);
- ctx.rotate(270 * Math.PI / 180);
- this._fillText(ctx, text, 0, 0, font);
- if(stroke)
- {
- this._strokeText(ctx, text, 0, 0, font);
- }
- ctx.restore();
- } else {
- this._fillText(ctx, text, posx, posy, font);
- if(stroke)
- {
- this._strokeText(ctx, text, posx, posy, font);
- }
- }
- },
- measureText: function(ctx, text)
- {
- return (ctx.measureText ? ctx.measureText(text).width : (ctx.mozMeasureText ? ctx.mozMeasureText(text) : 100));
- },
- drawImage: function(ctx, image, startx, starty, width, height, destx, desty, destwidth, destheight)
- {
- try {
- var img = image[0];
- ctx.drawImage(img, startx, starty, width, height, destx, desty, destwidth, destheight);
- } catch(e)
- {
- alert('Problem with canvas ' + e.message);
- }
- },
- drawImageslice: function(ctx, spritepos, pos)
- {
- try {
- var spriteposition = spritepos;
- var imagepos = pos;
- if(this.spriteimage != null)
- {
- ctx.drawImage(this.spriteimage, spriteposition.x, 0, spriteposition.w, spriteposition.h, imagepos.x - Math.floor(spriteposition.w / 2), imagepos.y - Math.floor(spriteposition.h / 2), spriteposition.w, spriteposition.h);
- }
- } catch(e)
- {
- llh.error('Problem with canvas ' + e.message);
- }
- },
- roundedRect: function (ctx, x, y, width, height, startpos, toporientation, leftorientation, radius, options)
- {
- var opening = 7;
- var openingheight = (height - opening) / 2;
- function v(value) {return (leftorientation ? value + x : width + x - value);}
- ctx.beginPath();
- ctx.moveTo(v(0),y+radius);
- // draw to opening
- ctx.lineTo(v(0), y + openingheight - opening / 2);
- // draw to origin
- ctx.quadraticCurveTo(v(-x), y + openingheight - opening / 2, startpos.x, startpos.y);
- // back to bubble
- ctx.quadraticCurveTo(v(-x), y + openingheight + opening / 2, v(0), y + openingheight + opening / 2);
- ctx.lineTo(v(0),y+height-radius);
- ctx.quadraticCurveTo(v(0),y+height,v(radius),y+height);
- ctx.lineTo(v(width-radius),y+height);
- ctx.quadraticCurveTo(v(width),y+height,v(width),y+height-radius);
- ctx.lineTo(v(width),y+radius);
- ctx.quadraticCurveTo(v(width),y,v(width-radius),y);
- ctx.lineTo(v(radius),y);
- ctx.quadraticCurveTo(v(0),y,v(0),y+radius);
- ctx.closePath();
- ctx.strokeStyle = (options && options.color ? options.color : "#723F3F");
- ctx.fillStyle = (options && options.bkcolor ? options.bkcolor : "rgba(255, 255, 255, 1.0)");
- ctx.fill();
- ctx.stroke();
- },
- customiseBubble: function(ctx, divelement, toporientation, leftorientation, options)
- {
- var position = divelement.position();
- position.top += parseInt(divelement.css("padding-top").replace("px", ""));
- position.left += parseInt(divelement.css("padding-left").replace("px", ""));
- var margin = 5;
- ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
- var startpos = {x: (leftorientation ? 0 : ctx.canvas.width), y: (toporientation ? 0 : ctx.canvas.height)};
- this.roundedRect(ctx, position.left - margin, position.top - margin, divelement.width() + 2 * margin, divelement.height() + 2 * margin, startpos, toporientation, leftorientation, 15, options);
- },
- hitTest: function(imagesrc, x, y, width, height, incanvas)
- {
- var canvaswidth = imagesrc.canvas.width;
- var canvasheight = imagesrc.canvas.height;
- if(incanvas)
- {
- if((x < 0) || (y < 0) || (x + width > canvaswidth) || (y + height > canvasheight))
- {
- return true;
- }
- }
- var imagesrcdata = imagesrc.getImageData(x, y, width, height);
- var pixels = imagesrcdata.data;
- for (var i = 0, n = pixels.length; i < n; i += 4) {
- // uses opacity component to find out if pixel has been set
- if(pixels[i] != 255)
- {
- return true;
- }
- //message = message + ":" + pixels[i + 3];
- }
- return false;
- }
- }