scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-28 00:42:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Wrap up Raster#smoothing feature

Browse source
This commit is contained in:
Jürg Lehni 2018-10-03 19:01:02 +02:00
parent 1c4e5cd84b
commit 28dec90a88
3 changed files with 37 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
examples/Rasters/Smoothing.html
View file

File diff suppressed because one or more lines are too long

41
src/item/Raster.js
View file

@ -30,6 +30,7 @@ var Raster = Item.extend(/** @lends Raster# */{
},
// Prioritize `crossOrigin` over `source`:
_prioritize: ['crossOrigin'],
_smoothing: true,
// TODO: Implement type, width, height.
// TODO: Have SymbolItem & Raster inherit from a shared class?
@ -98,11 +99,6 @@ var Raster = Item.extend(/** @lends Raster# */{
this._size = new Size();
this._loaded = false;
}
// set smoothing default value
if (this._smoothing === undefined)
{
this._smoothing = true;
}
},
_equals: function(item) {
@ -425,8 +421,8 @@ var Raster = Item.extend(/** @lends Raster# */{
},
/**
* Specifies if the raster should be smoothed when scaled up
* or if pixels should be visible.
* Specifies if the raster should be smoothed when scaled up or if the
* pixels should be scaled up by repeating the nearest neighboring pixels.
*
* @bean
* @type Boolean
@ -445,6 +441,7 @@ var Raster = Item.extend(/** @lends Raster# */{
setSmoothing: function(smoothing) {
this._smoothing = smoothing;
this._changed(/*#=*/Change.ATTRIBUTE);
},
// DOCS: document Raster#getElement
@ -762,9 +759,11 @@ var Raster = Item.extend(/** @lends Raster# */{
ctx.globalAlpha = this._opacity;
// Set context smoothing value according to raster property.
// There is no need to restore original value after drawing thanks
// to the call to ctx.restore() in Item#draw() after this method call.
this._setContextSmoothing(ctx, this._smoothing);
// There's no need to restore original value after drawing due to
// the call to ctx.restore() in Item#draw() after this method call.
DomElement.setPrefixed(
ctx, 'imageSmoothingEnabled', this._smoothing
);
ctx.drawImage(element,
-this._size.width / 2, -this._size.height / 2);
@ -773,27 +772,5 @@ var Raster = Item.extend(/** @lends Raster# */{
_canComposite: function() {
return true;
},
/**
* Set given context smoothing property.
* Handle vendor prefixing to improve browser compatibility.
* @param {CanvasRenderingContext2D} ctx
* @param {Boolean} value
* @private
*/
_setContextSmoothing: function(ctx, value) {
var keys = [
'imageSmoothingEnabled',
'mozImageSmoothingEnabled',
'webkitImageSmoothingEnabled',
'msImageSmoothingEnabled'
];
for (var i=0; i<keys.length; i++) {
if (keys[i] in ctx) {
ctx[keys[i]] = value;
return;
}
}
}
});

10
test/tests/Raster.js
View file

@ -180,30 +180,28 @@ test('Raster#getAverageColor(path) with compound path', function() {
{ tolerance: 1e-3 });
});
test('Raster#smoothing default value is true', function() {
test('Raster#smoothing defaults to true', function() {
var raster = new Raster();
equals(raster.smoothing, true);
});
test('Raster#getSmoothing / setSmoothing', function() {
var raster = new Raster({smoothing: false});
test('Raster#smoothing', function() {
var raster = new Raster({ smoothing: false });
equals(raster.smoothing, false);
raster.smoothing = true;
equals(raster.smoothing, true);
});
test('Raster#setSmoothing doesn\'t impact canvas context', function(assert) {
test('Raster#setSmoothing setting does not impact canvas context', function(assert) {
var done = assert.async();
var raster = new Raster('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpi+s/AwPCfgYmR4f9/hv8AAQYAHiAFAS8Lwy8AAAAASUVORK5CYII=');
var view = raster.view;
var context = view._context;
raster.onLoad = function() {
var originalValue = context.imageSmoothingEnabled;
raster.smoothing = false;
view.update();
equals(context.imageSmoothingEnabled, originalValue);
done();
};