scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -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

37
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` over `source`:
_prioritize: ['crossOrigin'], _prioritize: ['crossOrigin'],
_smoothing: true,
// TODO: Implement type, width, height. // TODO: Implement type, width, height.
// TODO: Have SymbolItem & Raster inherit from a shared class? // TODO: Have SymbolItem & Raster inherit from a shared class?
@ -98,11 +99,6 @@ var Raster = Item.extend(/** @lends Raster# */{
this._size = new Size(); this._size = new Size();
this._loaded = false; this._loaded = false;
} }
// set smoothing default value
if (this._smoothing === undefined)
{
this._smoothing = true;
}
}, },
_equals: function(item) { _equals: function(item) {
@ -425,8 +421,8 @@ var Raster = Item.extend(/** @lends Raster# */{
}, },
/** /**
* Specifies if the raster should be smoothed when scaled up * Specifies if the raster should be smoothed when scaled up or if the
* or if pixels should be visible. * pixels should be scaled up by repeating the nearest neighboring pixels.
* *
* @bean * @bean
* @type Boolean * @type Boolean
@ -445,6 +441,7 @@ var Raster = Item.extend(/** @lends Raster# */{
setSmoothing: function(smoothing) { setSmoothing: function(smoothing) {
this._smoothing = smoothing; this._smoothing = smoothing;
this._changed(/*#=*/Change.ATTRIBUTE);
}, },
// DOCS: document Raster#getElement // DOCS: document Raster#getElement
@ -762,9 +759,11 @@ var Raster = Item.extend(/** @lends Raster# */{
ctx.globalAlpha = this._opacity; ctx.globalAlpha = this._opacity;
// Set context smoothing value according to raster property. // Set context smoothing value according to raster property.
// There is no need to restore original value after drawing thanks // There's no need to restore original value after drawing due to
// to the call to ctx.restore() in Item#draw() after this method call. // the call to ctx.restore() in Item#draw() after this method call.
this._setContextSmoothing(ctx, this._smoothing); DomElement.setPrefixed(
ctx, 'imageSmoothingEnabled', this._smoothing
);
ctx.drawImage(element, ctx.drawImage(element,
-this._size.width / 2, -this._size.height / 2); -this._size.width / 2, -this._size.height / 2);
@ -773,27 +772,5 @@ var Raster = Item.extend(/** @lends Raster# */{
_canComposite: function() { _canComposite: function() {
return true; 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 }); { tolerance: 1e-3 });
}); });
test('Raster#smoothing default value is true', function() { test('Raster#smoothing defaults to true', function() {
var raster = new Raster(); var raster = new Raster();
equals(raster.smoothing, true); equals(raster.smoothing, true);
}); });
test('Raster#getSmoothing / setSmoothing', function() { test('Raster#smoothing', function() {
var raster = new Raster({smoothing: false}); var raster = new Raster({ smoothing: false });
equals(raster.smoothing, false); equals(raster.smoothing, false);
raster.smoothing = true; raster.smoothing = true;
equals(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 done = assert.async();
var raster = new Raster('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpi+s/AwPCfgYmR4f9/hv8AAQYAHiAFAS8Lwy8AAAAASUVORK5CYII='); var raster = new Raster('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpi+s/AwPCfgYmR4f9/hv8AAQYAHiAFAS8Lwy8AAAAASUVORK5CYII=');
var view = raster.view; var view = raster.view;
var context = view._context; var context = view._context;
raster.onLoad = function() { raster.onLoad = function() {
var originalValue = context.imageSmoothingEnabled; var originalValue = context.imageSmoothingEnabled;
raster.smoothing = false; raster.smoothing = false;
view.update(); view.update();
equals(context.imageSmoothingEnabled, originalValue); equals(context.imageSmoothingEnabled, originalValue);
done(); done();
}; };