small updates to Ox.Image
This commit is contained in:
rolux
parent
ecba7968c1
commit
581b87baf9
1 changed files with 36 additions and 33 deletions
|
|
@ -49,13 +49,7 @@ Ox.load.Image = function(options, callback) {
|
||||||
return capacity;
|
return capacity;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getIndex() {
|
function getIndex(xy) {
|
||||||
var xy;
|
|
||||||
if (arguments.length == 1) {
|
|
||||||
xy = arguments[0];
|
|
||||||
} else {
|
|
||||||
xy = [arguments[0], arguments[1]];
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
Ox.mod(xy[0], self.width)
|
Ox.mod(xy[0], self.width)
|
||||||
+ Ox.mod(xy[1] * self.width, self.width * self.height)
|
+ Ox.mod(xy[1] * self.width, self.width * self.height)
|
||||||
|
|
@ -90,6 +84,15 @@ Ox.load.Image = function(options, callback) {
|
||||||
self.callback(that);
|
self.callback(that);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function parseDrawOptions(options) {
|
||||||
|
options = options || {};
|
||||||
|
that.context.strokeStyle = options.width === 0
|
||||||
|
? 'rgba(0, 0, 0, 0)' : options.color || 'rgb(0, 0, 0)';
|
||||||
|
that.context.fillStyle = options.fill || 'rgba(0, 0, 0, 0)';
|
||||||
|
that.context.lineWidthWidth = options.width !== void 0
|
||||||
|
? options.width : 1;
|
||||||
|
}
|
||||||
|
|
||||||
function setSL(sl, d) {
|
function setSL(sl, d) {
|
||||||
var c = sl == 's' ? 1 : 2;
|
var c = sl == 's' ? 1 : 2;
|
||||||
return that.map(function(rgba) {
|
return that.map(function(rgba) {
|
||||||
|
|
@ -191,10 +194,7 @@ Ox.load.Image = function(options, callback) {
|
||||||
width <n|1> Line width in px
|
width <n|1> Line width in px
|
||||||
@*/
|
@*/
|
||||||
that.drawCircle = function(point, radius, options) {
|
that.drawCircle = function(point, radius, options) {
|
||||||
options = options || {};
|
parseDrawOptions(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.beginPath();
|
||||||
that.context.arc(point[0], point[1], radius, 0, 2 * Math.PI);
|
that.context.arc(point[0], point[1], radius, 0, 2 * Math.PI);
|
||||||
that.context.fill();
|
that.context.fill();
|
||||||
|
|
@ -211,9 +211,7 @@ Ox.load.Image = function(options, callback) {
|
||||||
width <n|1> Line width in px
|
width <n|1> Line width in px
|
||||||
@*/
|
@*/
|
||||||
that.drawLine = function(points, options, isPath) {
|
that.drawLine = function(points, options, isPath) {
|
||||||
options = options || {};
|
parseDrawOptions(options);
|
||||||
that.context.strokeStyle = options.color || 'rgb(0, 0, 0)';
|
|
||||||
that.context.lineWidth = options.width || 1;
|
|
||||||
!isPath && that.context.beginPath();
|
!isPath && that.context.beginPath();
|
||||||
!isPath && that.context.moveTo(points[0][0], points[0][1]);
|
!isPath && that.context.moveTo(points[0][0], points[0][1]);
|
||||||
that.context.lineTo(points[1][0], points[1][1]);
|
that.context.lineTo(points[1][0], points[1][1]);
|
||||||
|
|
@ -232,8 +230,7 @@ Ox.load.Image = function(options, callback) {
|
||||||
@*/
|
@*/
|
||||||
that.drawPath = function(points, options) {
|
that.drawPath = function(points, options) {
|
||||||
var n = points.length;
|
var n = points.length;
|
||||||
options = options || {};
|
parseDrawOptions(options);
|
||||||
that.context.fillStyle = options.fill || 'rgba(0, 0, 0, 0)';
|
|
||||||
that.context.beginPath();
|
that.context.beginPath();
|
||||||
that.context.moveTo(points[0][0], points[0][1]);
|
that.context.moveTo(points[0][0], points[0][1]);
|
||||||
Ox.loop(options.close ? n : n - 1, function(i) {
|
Ox.loop(options.close ? n : n - 1, function(i) {
|
||||||
|
|
@ -255,10 +252,7 @@ Ox.load.Image = function(options, callback) {
|
||||||
width <n|1> Line width in px
|
width <n|1> Line width in px
|
||||||
@*/
|
@*/
|
||||||
that.drawRectangle = function(point, size, options) {
|
that.drawRectangle = function(point, size, options) {
|
||||||
options = options || {};
|
parseDrawOptions(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.fillRect(point[0], point[1], size[0], size[1]);
|
||||||
that.context.strokeRect(point[0], point[1], size[0], size[1]);
|
that.context.strokeRect(point[0], point[1], size[0], size[1]);
|
||||||
return that;
|
return that;
|
||||||
|
|
@ -310,9 +304,9 @@ Ox.load.Image = function(options, callback) {
|
||||||
@*/
|
@*/
|
||||||
that.emboss = function(val) {
|
that.emboss = function(val) {
|
||||||
return that.filter([
|
return that.filter([
|
||||||
-1, -1, +0,
|
-1, -1, 0,
|
||||||
-1, +0, +1,
|
-1, 0, +1,
|
||||||
+0, +1, +1
|
0, +1, +1
|
||||||
], 128).saturation(-1);
|
], 128).saturation(-1);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -500,7 +494,7 @@ Ox.load.Image = function(options, callback) {
|
||||||
});
|
});
|
||||||
Ox.loop(-d, d + 1, function(x) {
|
Ox.loop(-d, d + 1, function(x) {
|
||||||
Ox.loop(-d, d + 1, function(y) {
|
Ox.loop(-d, d + 1, function(y) {
|
||||||
var pixelIndex = getIndex(xy[0] + x, xy[1] + y);
|
var pixelIndex = getIndex([xy[0] + x, xy[1] + y]);
|
||||||
Ox.loop(3, function(c) {
|
Ox.loop(3, function(c) {
|
||||||
data[i + c] += self.data[pixelIndex + c] * filter[filterIndex];
|
data[i + c] += self.data[pixelIndex + c] * filter[filterIndex];
|
||||||
});
|
});
|
||||||
|
|
@ -631,17 +625,23 @@ Ox.load.Image = function(options, callback) {
|
||||||
if (xy[0] % size == 0 && xy[1] % size == 0) {
|
if (xy[0] % size == 0 && xy[1] % size == 0) {
|
||||||
Ox.loop(size, function(x) {
|
Ox.loop(size, function(x) {
|
||||||
Ox.loop(size, function(y) {
|
Ox.loop(size, function(y) {
|
||||||
var hsl, rgb;
|
var hsl, rgb, xy_ = [xy[0] + x, xy[1] + y];
|
||||||
if ((x == 0 || y == 0) && !(x == size - 1 || y == size - 1)) {
|
if (
|
||||||
that.pixel(xy[0] + x, xy[1] + y, rgba.map(function(c, i) {
|
(x == 0 || y == 0)
|
||||||
|
&& !(x == size - 1 || y == size - 1)
|
||||||
|
) {
|
||||||
|
that.pixel(xy_, rgba.map(function(c, i) {
|
||||||
return i < 3 ? Math.min(c + 16, 255) : c;
|
return i < 3 ? Math.min(c + 16, 255) : c;
|
||||||
}));
|
}));
|
||||||
} else if ((x == size - 1 || y == size - 1) && !(x == 0 || y == 0)) {
|
} else if (
|
||||||
that.pixel(xy[0] + x, xy[1] + y, rgba.map(function(c, i) {
|
(x == size - 1 || y == size - 1)
|
||||||
|
&& !(x == 0 || y == 0)
|
||||||
|
) {
|
||||||
|
that.pixel(xy_, rgba.map(function(c, i) {
|
||||||
return i < 3 ? Math.max(c - 16, 0) : c;
|
return i < 3 ? Math.max(c - 16, 0) : c;
|
||||||
}));
|
}));
|
||||||
} else {
|
} else {
|
||||||
that.pixel(xy[0] + x, xy[1] + y, rgba);
|
that.pixel(xy_, rgba);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -681,17 +681,20 @@ Ox.load.Image = function(options, callback) {
|
||||||
y <n> Y coordinate
|
y <n> Y coordinate
|
||||||
val <[n]> RGBA values
|
val <[n]> RGBA values
|
||||||
@*/
|
@*/
|
||||||
that.pixel = function(x, y, val) {
|
that.pixel = function(xy, val) {
|
||||||
var i = getIndex(x, y);
|
var i = getIndex(xy), ret;
|
||||||
if (!val) {
|
if (!val) {
|
||||||
return Ox.range(4).map(function(c) {
|
ret = Ox.range(4).map(function(c) {
|
||||||
return self.data[i + c];
|
return self.data[i + c];
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
val.forEach(function(v, c) {
|
val.forEach(function(v, c) {
|
||||||
self.data[i + c] = v;
|
self.data[i + c] = v;
|
||||||
});
|
});
|
||||||
|
that.context.putImageData(self.imageData, 0, 0);
|
||||||
|
ret = that;
|
||||||
}
|
}
|
||||||
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue