0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

upgrade image module (draw methods and others)

Browse source
This commit is contained in:
rolux 2012-04-11 22:34:55 +02:00
parent ebc6efffb4
commit 924a0532c2
1 changed files with 104 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
source/Ox.Image/Ox.Image.js
View file

@ -72,7 +72,7 @@ Ox.load.Image = function(options, callback) {
self.width = self.image.width; self.width = self.image.width;
self.height = self.image.height; self.height = self.image.height;
} }
that.canvas = Ox.element('<canvas>').attr({ that.canvas = Ox.$('<canvas>').attr({
width: self.width, width: self.width,
height: self.height height: self.height
}); });
@ -83,10 +83,10 @@ Ox.load.Image = function(options, callback) {
that.context.fillStyle(self.background); that.context.fillStyle(self.background);
that.context.fillRect(0, 0, self.width, self.height); 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 0, 0, self.width, self.height
); );
self.data = that.imageData.data; self.data = self.imageData.data;
self.callback(that); self.callback(that);
} }
@ -120,7 +120,7 @@ Ox.load.Image = function(options, callback) {
}); });
filter = filter.map(function(val) { filter = filter.map(function(val) {
return val / sum; return val / sum;
}) });
return that.filter(filter); 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 <f> Apply edges filter edges <f> Apply edges filter
() -> <o> The image object () -> <o> 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); callback(that);
return that; return that;
}; };
@ -377,8 +441,8 @@ Ox.load.Image = function(options, callback) {
d = (filterSize - 1) / 2, d = (filterSize - 1) / 2,
imageData = that.context.createImageData(self.width, self.height), imageData = that.context.createImageData(self.width, self.height),
data = []; data = [];
that.imageData = that.context.getImageData(0, 0, self.width, self.height); self.imageData = that.context.getImageData(0, 0, self.width, self.height);
self.data = that.imageData.data; self.data = self.imageData.data;
Ox.loop(0, self.data.length, 4, function(i) { Ox.loop(0, self.data.length, 4, function(i) {
var filterIndex = 0, var filterIndex = 0,
xy = getXY(i); xy = getXY(i);
@ -403,7 +467,7 @@ Ox.load.Image = function(options, callback) {
}); });
}); });
that.context.putImageData(imageData, 0, 0); that.context.putImageData(imageData, 0, 0);
that.imageData = imageData; self.imageData = imageData;
self.data = data; self.data = data;
return that; return that;
}; };
@ -425,6 +489,10 @@ Ox.load.Image = function(options, callback) {
return that; return that;
}; };
that.getSize = function() {
return {width: self.width, height: self.height};
};
that.hue = function(val) { that.hue = function(val) {
return that.map(function(rgba) { return that.map(function(rgba) {
var hsl = Ox.hsl([rgba[0], rgba[1], rgba[2]]), rgb; var hsl = Ox.hsl([rgba[0], rgba[1], rgba[2]]), rgb;
@ -434,7 +502,23 @@ Ox.load.Image = function(options, callback) {
}); });
}; };
//@ imageData <o> Image data object /*@
imageData <f> Get or set image data
() -> <o> ImageData object
data <a> CanvasPixelArray
height <n> Height in px
width <n> Width in px
(imageData) -> <o> Image object with new image data
imageData <o> ImageData object
@*/
that.imageData = function() {
if (arguments.length == 0) {
return self.imageData;
} else {
self.imageData = self.context.createImageData(arguments[0]);
}
};
/*@ /*@
invert <f> Apply invert filter invert <f> Apply invert filter
@ -463,8 +547,8 @@ Ox.load.Image = function(options, callback) {
xy <[n]> XY coordinates xy <[n]> XY coordinates
@*/ @*/
that.map = function(fn) { that.map = function(fn) {
that.imageData = that.context.getImageData(0, 0, self.width, self.height); self.imageData = that.context.getImageData(0, 0, self.width, self.height);
self.data = that.imageData.data; self.data = self.imageData.data;
Ox.loop(0, self.data.length, 4, function(i) { Ox.loop(0, self.data.length, 4, function(i) {
fn([ fn([
self.data[i], self.data[i + 1], self.data[i], self.data[i + 1],
@ -473,7 +557,7 @@ Ox.load.Image = function(options, callback) {
self.data[i + c] = val; self.data[i + c] = val;
}); });
}) })
that.context.putImageData(that.imageData, 0, 0); that.context.putImageData(self.imageData, 0, 0);
return that; 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; return that;
} }
@ -613,12 +697,13 @@ Ox.load.Image = function(options, callback) {
/*@ /*@
src <f> Get or set the image source src <f> Get or set the image source
() -> <s> Data URL () -> <s> Data URL
(src) -> <o> Image object, with new source (src) -> <o> Image object with new source
src <s> Image source (local, remote or data URL) src <s> Image source (local, remote or data URL)
@*/ @*/
that.src = function() { that.src = function() {
var ret;
if (arguments.length == 0) { if (arguments.length == 0) {
return that.canvas[0].toDataURL(); ret = that.canvas[0].toDataURL();
} else { } else {
var callback = arguments[1]; var callback = arguments[1];
self.src = arguments[0]; self.src = arguments[0];
@ -631,13 +716,14 @@ Ox.load.Image = function(options, callback) {
height: self.height height: self.height
}); });
that.context.drawImage(self.image, 0, 0); that.context.drawImage(self.image, 0, 0);
that.imageData = that.context.getImageData(0, 0, self.width, self.height); self.imageData = that.context.getImageData(0, 0, self.width, self.height);
self.data = that.imageData.data; self.data = self.imageData.data;
callback && callback(that); callback && callback(that);
} }
self.image.src = self.src; self.image.src = self.src;
return that; ret = that;
} }
return ret;
}; };
}; };