From 924a0532c2c85a1e91b1985b7174b07f3368fa59 Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 11 Apr 2012 22:34:55 +0200 Subject: [PATCH] upgrade image module (draw methods and others) --- source/Ox.Image/Ox.Image.js | 122 ++++++++++++++++++++++++++++++------ 1 file changed, 104 insertions(+), 18 deletions(-) diff --git a/source/Ox.Image/Ox.Image.js b/source/Ox.Image/Ox.Image.js index 743440e7..f7442a72 100644 --- a/source/Ox.Image/Ox.Image.js +++ b/source/Ox.Image/Ox.Image.js @@ -72,7 +72,7 @@ Ox.load.Image = function(options, callback) { self.width = self.image.width; self.height = self.image.height; } - that.canvas = Ox.element('').attr({ + that.canvas = Ox.$('').attr({ width: self.width, height: self.height }); @@ -83,10 +83,10 @@ Ox.load.Image = function(options, callback) { that.context.fillStyle(self.background); that.context.fillRect(0, 0, self.width, self.height); } - that.imageData = that.context.getImageData( + self.imageData = that.context.getImageData( 0, 0, self.width, self.height ); - self.data = that.imageData.data; + self.data = self.imageData.data; self.callback(that); } @@ -120,7 +120,7 @@ Ox.load.Image = function(options, callback) { }); filter = filter.map(function(val) { return val / sum; - }) + }); return that.filter(filter); }; @@ -180,6 +180,70 @@ Ox.load.Image = function(options, callback) { }); }; + that.drawCircle = function(point, radius, options) { + options = options || {}; + that.context.strokeStyle = options.color || 'rgb(0, 0, 0)'; + that.context.fillStyle = options.fill || 'rgba(0, 0, 0, 0)'; + that.context.lineWidth = options.width || 1; + that.context.beginPath(); + that.context.arc(point[0], point[1], radius, 0, 2 * Math.PI); + that.context.fill(); + that.context.stroke(); + return that; + }; + + that.drawLine = function(points, options, isPath) { + options = options || {}; + that.context.strokeStyle = options.color || 'rgb(0, 0, 0)'; + that.context.lineWidth = options.width || 1; + !isPath && that.context.beginPath(); + !isPath && that.context.moveTo(points[0][0], points[0][1]); + that.context.lineTo(points[1][0], points[1][1]); + !isPath && that.context.stroke(); + return that; + }; + + that.drawPath = function(points, options) { + var n = points.length; + options = options || {}; + that.context.fillStyle = options.fill || 'rgba(0, 0, 0, 0)'; + that.context.beginPath(); + that.context.moveTo(points[0][0], points[0][1]); + Ox.loop(options.close ? n : n - 1, function(i) { + that.drawLine([points[i], points[(i + 1) % n]], options, true); + }); + that.context.fill(); + that.context.stroke(); + return that; + }; + + that.drawRectangle = function(point, size, options) { + options = options || {}; + that.context.strokeStyle = options.color || 'rgb(0, 0, 0)'; + that.context.fillStyle = options.fill || 'rgba(0, 0, 0, 0)'; + that.context.lineWidth = options.width || 1; + that.context.fillRect(point[0], point[1], size[0], size[1]); + that.context.strokeRect(point[0], point[1], size[0], size[1]); + return that; + }; + + that.drawText = function(text, point, options) { + options = options || {}; + var match = ( + options.outline || '0px rgba(0, 0, 0, 0)' + ).match(/^([\d\.]+)px (.+)$/), + outlineWidth = match[1], + outlineColor = match[2]; + that.context.fillStyle = options.color || 'rgb(0, 0, 0)'; + that.context.font = options.font || '10px sans-serif'; + that.context.strokeStyle = outlineColor; + that.context.lineWidth = outlineWidth; + that.context.textAlign = options.textAlign || 'start'; + that.context.fillText(text, point[0], point[1]) + that.context.strokeText(text, point[0], point[1]) + return that; + }; + /*@ edges Apply edges filter () -> The image object @@ -283,7 +347,7 @@ Ox.load.Image = function(options, callback) { }); } }); - that.context.putImageData(that.imageData, 0, 0); + that.context.putImageData(self.imageData, 0, 0); callback(that); return that; }; @@ -377,8 +441,8 @@ Ox.load.Image = function(options, callback) { d = (filterSize - 1) / 2, imageData = that.context.createImageData(self.width, self.height), data = []; - that.imageData = that.context.getImageData(0, 0, self.width, self.height); - self.data = that.imageData.data; + self.imageData = that.context.getImageData(0, 0, self.width, self.height); + self.data = self.imageData.data; Ox.loop(0, self.data.length, 4, function(i) { var filterIndex = 0, xy = getXY(i); @@ -403,7 +467,7 @@ Ox.load.Image = function(options, callback) { }); }); that.context.putImageData(imageData, 0, 0); - that.imageData = imageData; + self.imageData = imageData; self.data = data; return that; }; @@ -425,6 +489,10 @@ Ox.load.Image = function(options, callback) { return that; }; + that.getSize = function() { + return {width: self.width, height: self.height}; + }; + that.hue = function(val) { return that.map(function(rgba) { var hsl = Ox.hsl([rgba[0], rgba[1], rgba[2]]), rgb; @@ -434,7 +502,23 @@ Ox.load.Image = function(options, callback) { }); }; - //@ imageData Image data object + /*@ + imageData Get or set image data + () -> ImageData object + data CanvasPixelArray + height Height in px + width Width in px + (imageData) -> Image object with new image data + imageData ImageData object + @*/ + + that.imageData = function() { + if (arguments.length == 0) { + return self.imageData; + } else { + self.imageData = self.context.createImageData(arguments[0]); + } + }; /*@ invert Apply invert filter @@ -463,8 +547,8 @@ Ox.load.Image = function(options, callback) { xy <[n]> XY coordinates @*/ that.map = function(fn) { - that.imageData = that.context.getImageData(0, 0, self.width, self.height); - self.data = that.imageData.data; + self.imageData = that.context.getImageData(0, 0, self.width, self.height); + self.data = self.imageData.data; Ox.loop(0, self.data.length, 4, function(i) { fn([ self.data[i], self.data[i + 1], @@ -473,7 +557,7 @@ Ox.load.Image = function(options, callback) { self.data[i + c] = val; }); }) - that.context.putImageData(that.imageData, 0, 0); + that.context.putImageData(self.imageData, 0, 0); return that; }; @@ -503,7 +587,7 @@ Ox.load.Image = function(options, callback) { }); } }); - that.context.putImageData(that.imageData, 0, 0); + that.context.putImageData(self.imageData, 0, 0); return that; } @@ -613,12 +697,13 @@ Ox.load.Image = function(options, callback) { /*@ src Get or set the image source () -> Data URL - (src) -> Image object, with new source + (src) -> Image object with new source src Image source (local, remote or data URL) @*/ that.src = function() { + var ret; if (arguments.length == 0) { - return that.canvas[0].toDataURL(); + ret = that.canvas[0].toDataURL(); } else { var callback = arguments[1]; self.src = arguments[0]; @@ -631,13 +716,14 @@ Ox.load.Image = function(options, callback) { height: self.height }); that.context.drawImage(self.image, 0, 0); - that.imageData = that.context.getImageData(0, 0, self.width, self.height); - self.data = that.imageData.data; + self.imageData = that.context.getImageData(0, 0, self.width, self.height); + self.data = self.imageData.data; callback && callback(that); } self.image.src = self.src; - return that; + ret = that; } + return ret; }; };