upgrade image module (draw methods and others)
This commit is contained in:
rolux
parent
ebc6efffb4
commit
924a0532c2
1 changed files with 104 additions and 18 deletions
|
|
@ -72,7 +72,7 @@ Ox.load.Image = function(options, callback) {
|
|||
self.width = self.image.width;
|
||||
self.height = self.image.height;
|
||||
}
|
||||
that.canvas = Ox.element('<canvas>').attr({
|
||||
that.canvas = Ox.$('<canvas>').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 <f> Apply edges filter
|
||||
() -> <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);
|
||||
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 <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
|
||||
|
|
@ -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 <f> Get or set the image source
|
||||
() -> <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)
|
||||
@*/
|
||||
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;
|
||||
};
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue