mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-29 09:22:22 -05:00
236 lines
7.9 KiB
JavaScript
236 lines
7.9 KiB
JavaScript
/*
|
|
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
|
* http://paperjs.org/
|
|
*
|
|
* Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
|
|
* http://juerglehni.com/ & https://puckey.studio/
|
|
*
|
|
* Distributed under the MIT license. See LICENSE file for details.
|
|
*
|
|
* All rights reserved.
|
|
*/
|
|
|
|
QUnit.module('Raster');
|
|
|
|
test('Create a raster without a source and check its size', function() {
|
|
var raster = new Raster();
|
|
equals(raster.size, new Size(0, 0), true);
|
|
});
|
|
|
|
test('Create a raster without a source and set its size', function() {
|
|
var raster = new Raster();
|
|
raster.size = [640, 480];
|
|
equals(raster.size, new Size(640, 480), true);
|
|
});
|
|
|
|
test('Create a raster from a URL', function(assert) {
|
|
var done = assert.async();
|
|
var raster = new Raster('assets/paper-js.gif');
|
|
raster.onLoad = function() {
|
|
equals(raster.size, new Size(146, 146), true);
|
|
done();
|
|
};
|
|
raster.onError = function(event) {
|
|
pushFailure('Loading from a valid local URL should not give an error.');
|
|
done();
|
|
};
|
|
});
|
|
|
|
test('Create a raster from a data URL', function(assert) {
|
|
var done = assert.async();
|
|
var raster = new Raster('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpi+s/AwPCfgYmR4f9/hv8AAQYAHiAFAS8Lwy8AAAAASUVORK5CYII=');
|
|
raster.onLoad = function() {
|
|
equals(raster.size, new Size(2, 2), true);
|
|
done();
|
|
};
|
|
raster.onError = function(event) {
|
|
pushFailure('Loading from a valid data URL should not give an error.');
|
|
done();
|
|
};
|
|
});
|
|
|
|
test('Create a raster from a dom image', function(assert) {
|
|
var done = assert.async();
|
|
var img = document.createElement('img');
|
|
img.src = 'assets/paper-js.gif';
|
|
document.body.appendChild(img);
|
|
DomEvent.add(img, {
|
|
load: function() {
|
|
var raster = new Raster(img);
|
|
equals(raster.size, new Size(146, 146), true);
|
|
document.body.removeChild(img);
|
|
done();
|
|
},
|
|
error: function() {
|
|
pushFailure('Loading from a valid data URL should not give an error.');
|
|
done();
|
|
}
|
|
});
|
|
});
|
|
|
|
test('Create a raster from a canvas', function() {
|
|
var canvas = paper.createCanvas(30, 20);
|
|
var raster = new Raster(canvas);
|
|
equals(raster.size, new Size(30, 20), true);
|
|
});
|
|
|
|
test('Create a raster from a dom id', function(assert) {
|
|
var done = assert.async();
|
|
var img = document.createElement('img');
|
|
img.src = 'assets/paper-js.gif';
|
|
img.id = 'testimage';
|
|
document.body.appendChild(img);
|
|
DomEvent.add(img, {
|
|
load: function() {
|
|
var raster = new Raster('testimage');
|
|
equals(raster.size, new Size(146, 146), true);
|
|
document.body.removeChild(img);
|
|
done();
|
|
},
|
|
error: function() {
|
|
pushFailure('Loading from a valid data URL should not give an error.');
|
|
done();
|
|
}
|
|
});
|
|
});
|
|
|
|
test('Raster#getPixel / setPixel', function(assert) {
|
|
var done = assert.async();
|
|
var raster = new Raster('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpi+s/AwPCfgYmR4f9/hv8AAQYAHiAFAS8Lwy8AAAAASUVORK5CYII=');
|
|
raster.onLoad = function() {
|
|
equals(raster.getPixel(0, 0), new Color(1, 0, 0, 1));
|
|
equals(raster.getPixel(1, 0), new Color(0, 1, 0, 1));
|
|
equals(raster.getPixel(0, 1), new Color(0, 0, 1, 1));
|
|
equals(raster.getPixel(1, 1), new Color(1, 1, 1, 1));
|
|
|
|
// Alpha
|
|
var color = new Color(1, 1, 0, 0.50196);
|
|
raster.setPixel([0, 0], color);
|
|
equals(raster.getPixel([0, 0]), color, 'alpha', { tolerance: 1e-2 });
|
|
done();
|
|
};
|
|
});
|
|
|
|
test('Raster#getSubCanvas', function(assert) {
|
|
var done = assert.async();
|
|
var raster = new Raster('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpi+s/AwPCfgYmR4f9/hv8AAQYAHiAFAS8Lwy8AAAAASUVORK5CYII=');
|
|
raster.onLoad = function() {
|
|
var canvas = raster.getSubCanvas(new Rectangle({
|
|
point: [1, 0],
|
|
size: [1, 2]
|
|
}));
|
|
equals(function() {
|
|
return canvas.width;
|
|
}, 1);
|
|
equals(function() {
|
|
return canvas.height;
|
|
}, 2);
|
|
var ctx = canvas.getContext('2d');
|
|
var expected = [
|
|
// green pixel:
|
|
0, 255, 0, 255,
|
|
// white pixel:
|
|
255, 255, 255, 255
|
|
];
|
|
equals(function() {
|
|
return Base.equals(Base.slice(ctx.getImageData(0, 0, 1, 2).data),
|
|
expected);
|
|
}, true);
|
|
done();
|
|
};
|
|
});
|
|
|
|
test('Raster#getAverageColor(path)', function() {
|
|
var rect = new Path.Rectangle({
|
|
point: [0, 0],
|
|
size: [100, 100],
|
|
fillColor: new Color(0, 1, 0)
|
|
});
|
|
var circle = new Path.Circle({
|
|
center: [50, 50],
|
|
radius: 25,
|
|
fillColor: new Color(1, 0, 0)
|
|
});
|
|
var raster = paper.project.activeLayer.rasterize(72);
|
|
circle.scale(0.8);
|
|
equals(raster.getAverageColor(circle), circle.fillColor, null,
|
|
{ tolerance: 1e-3 });
|
|
});
|
|
|
|
test('Raster#getAverageColor(path) with compound path', function() {
|
|
new Path.Rectangle({
|
|
point: [0, 0],
|
|
size: [100, 100],
|
|
fillColor: new Color(0, 1, 0)
|
|
});
|
|
var path = new Path.Circle({
|
|
center: [50, 50],
|
|
radius: 25
|
|
});
|
|
var path2 = new Path.Circle({
|
|
center: [50, 50],
|
|
radius: 10
|
|
});
|
|
var compoundPath = new CompoundPath(path, path2);
|
|
compoundPath.fillColor = new Color(1, 0, 0);
|
|
var raster = paper.project.activeLayer.rasterize(72);
|
|
path.scale(0.8);
|
|
path2.scale(1.2);
|
|
equals(raster.getAverageColor(compoundPath), new Color(1, 0, 0), null,
|
|
{ tolerance: 1e-3 });
|
|
});
|
|
|
|
test('Raster#smoothing defaults to false', function() {
|
|
var raster = new Raster();
|
|
equals(raster.smoothing, false);
|
|
});
|
|
|
|
test('Raster#smoothing', function() {
|
|
var raster = new Raster({ smoothing: true });
|
|
equals(raster.smoothing, true);
|
|
|
|
raster.smoothing = false;
|
|
equals(raster.smoothing, false);
|
|
});
|
|
|
|
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();
|
|
};
|
|
});
|
|
|
|
test('new Raster(size[, position])', function() {
|
|
// Size only.
|
|
var raster = new Raster(new Size(100, 100));
|
|
equals(raster.position, new Point(0, 0));
|
|
equals(raster.bounds, new Rectangle(-50, -50, 100, 100));
|
|
|
|
var raster = new Raster({size:new Size(100, 100)});
|
|
equals(raster.position, new Point(0, 0));
|
|
equals(raster.bounds, new Rectangle(-50, -50, 100, 100));
|
|
|
|
var raster = new Raster({width:100, height:100});
|
|
equals(raster.position, new Point(0, 0));
|
|
equals(raster.bounds, new Rectangle(-50, -50, 100, 100));
|
|
|
|
// Size and position.
|
|
var raster = new Raster(new Size(100, 100), new Point(100, 100));
|
|
equals(raster.position, new Point(100, 100));
|
|
equals(raster.bounds, new Rectangle(50, 50, 100, 100));
|
|
|
|
var raster = new Raster({size:new Size(100, 100), position:new Point(100, 100)});
|
|
equals(raster.position, new Point(100, 100));
|
|
equals(raster.bounds, new Rectangle(50, 50, 100, 100));
|
|
|
|
var raster = new Raster({width:100, height:100, position:new Point(100, 100)});
|
|
equals(raster.position, new Point(100, 100));
|
|
equals(raster.bounds, new Rectangle(50, 50, 100, 100));
|
|
});
|