mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-28 17:02:24 -05:00
350 lines
10 KiB
JavaScript
350 lines
10 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('Color');
|
|
|
|
test('Set named color', function() {
|
|
var path = new Path();
|
|
path.fillColor = 'red';
|
|
equals(path.fillColor, new Color(1, 0, 0));
|
|
equals(path.fillColor.toCSS(), 'rgb(255,0,0)');
|
|
});
|
|
|
|
test('Set color to hex', function() {
|
|
var path = new Path();
|
|
path.fillColor = '#ff0000';
|
|
equals(path.fillColor, new Color(1, 0, 0));
|
|
equals(path.fillColor.toCSS(), 'rgb(255,0,0)');
|
|
|
|
var path = new Path();
|
|
path.fillColor = '#f00';
|
|
equals(path.fillColor, new Color(1, 0, 0));
|
|
equals(path.fillColor.toCSS(), 'rgb(255,0,0)');
|
|
});
|
|
|
|
test('Set color to object', function() {
|
|
var path = new Path();
|
|
path.fillColor = { red: 1, green: 0, blue: 1};
|
|
equals(path.fillColor, new Color(1, 0, 1));
|
|
equals(path.fillColor.toCSS(), 'rgb(255,0,255)');
|
|
|
|
var path = new Path();
|
|
path.fillColor = { gray: 0.2 };
|
|
equals(path.fillColor, new Color(0.2));
|
|
equals(path.fillColor.toCSS(), 'rgb(51,51,51)');
|
|
});
|
|
|
|
test('Set color to array', function() {
|
|
var path = new Path();
|
|
path.fillColor = [1, 0, 0];
|
|
equals(path.fillColor, new Color(1, 0, 0));
|
|
equals(path.fillColor.toCSS(), 'rgb(255,0,0)');
|
|
});
|
|
|
|
test('Creating Colors', function() {
|
|
equals(new Color(), new Color(0, 0, 0),
|
|
'Color with no arguments should be black');
|
|
|
|
equals(new Color('black'), new Color(0, 0, 0),
|
|
'Color from name (black)');
|
|
|
|
equals(new Color('red'), new Color(1, 0, 0),
|
|
'Color from name (red)');
|
|
|
|
equals(new Color('transparent'), new Color(0, 0, 0, 0),
|
|
'Color from name (transparent)');
|
|
|
|
equals(new Color('#ff0000'), new Color(1, 0, 0),
|
|
'Color from hex string');
|
|
|
|
equals(new Color('#FF3300'), new Color(1, 0.2, 0),
|
|
'Color from uppercase hex string');
|
|
|
|
equals(new Color('#f009'), new Color(1, 0, 0, .6),
|
|
'Color from 4 characters hex code with alpha');
|
|
|
|
equals(new Color('#ff000099'), new Color(1, 0, 0, .6),
|
|
'Color from 8 characters hex code with alpha');
|
|
|
|
equals(new Color('rgb(255, 0, 0)'), new Color(1, 0, 0),
|
|
'Color from rgb() string');
|
|
|
|
equals(new Color('rgba(255, 0, 0, 0.5)'), new Color(1, 0, 0, 0.5),
|
|
'Color from rgba() string');
|
|
|
|
equals(new Color('rgba( 255, 0, 0, 0.5 )'), new Color(1, 0, 0, 0.5),
|
|
'Color from rgba() string 2nd test');
|
|
|
|
equals(new Color('rgb(100%, 50%, 0%)'), new Color(1, 0.5, 0),
|
|
'Color from rgb() percenst string');
|
|
|
|
equals(new Color('hsl(180deg, 20%, 40%)'),
|
|
new Color({ hue: 180, saturation: 0.2, lightness: 0.4 }),
|
|
'Color from hsl() string');
|
|
|
|
equals(new Color({ red: 1, green: 0, blue: 1}),
|
|
new Color(1, 0, 1), 'Color from RGB object literal');
|
|
|
|
equals(new Color({ gray: 0.2 }),
|
|
new Color(0.2), 'Color from gray object literal');
|
|
|
|
equals(new Color({ hue: 0, saturation: 1, brightness: 1}),
|
|
new Color(1, 0, 0).convert('hsb'), 'Color from HSB object literal');
|
|
|
|
equals(new Color([1, 0, 0]), new Color(1, 0, 0),
|
|
'RGB Color from array');
|
|
|
|
equals(new Color([1]), new Color(1),
|
|
'Gray Color from array');
|
|
});
|
|
|
|
test('Get gray from RGB Color', function() {
|
|
var color = new Color(1, 0.5, 0.2);
|
|
equals(color.gray, 0.6152);
|
|
|
|
var color = new Color(0.5, 0.2, 0.1);
|
|
equals(color.gray, 0.27825);
|
|
});
|
|
|
|
test('Get gray from HSB Color', function() {
|
|
var color = new Color({hue: 0, saturation: 0, brightness: 0.2 });
|
|
equals(color.gray, 0.19998);
|
|
});
|
|
|
|
test('Get red from HSB Color', function() {
|
|
var color = new Color({hue: 0, saturation: 1, brightness: 1 });
|
|
equals(color.red, 1);
|
|
});
|
|
|
|
test('Get hue from RGB Color', function() {
|
|
var color = new Color(1, 0, 0);
|
|
equals(color.hue, 0);
|
|
equals(color.saturation, 1);
|
|
});
|
|
|
|
test('Get gray after conversion', function() {
|
|
var color = new Color(1);
|
|
equals(color.gray, 1, 'color.gray');
|
|
equals(color.red, 1, 'color.red');
|
|
equals(color.blue, 1, 'color.blue');
|
|
|
|
color.red = 0.5;
|
|
equals(color.gray, 0.85045, 'color.gray');
|
|
|
|
color.green = 0.2;
|
|
|
|
equals(color.red, 0.5, 'color.red');
|
|
equals(color.green, 0.2, 'color.green');
|
|
equals(color.blue, 1, 'color.blue');
|
|
|
|
equals(color.gray, 0.38085, 'color.gray');
|
|
});
|
|
|
|
test('Converting Colors', function() {
|
|
var rgbColor = new Color(1, 0.5, 0.2);
|
|
equals(rgbColor.gray, 0.6152);
|
|
var grayColor = new Color(0.2);
|
|
equals(grayColor.convert('rgb'), new Color(0.2, 0.2, 0.2));
|
|
equals(grayColor.convert('hsb'),
|
|
new Color({ hue: 0, saturation: 0, brightness: 0.2 }));
|
|
equals(new Color(1, 0, 0).convert('hsb'),
|
|
new Color({ hue: 0, saturation: 1, brightness: 1 }));
|
|
});
|
|
|
|
test('Setting Color#gray', function() {
|
|
var color = new Color(1, 0.5, 0.2);
|
|
color.gray = 0.1;
|
|
equals(color, new Color(0.1));
|
|
});
|
|
|
|
test('Setting Color#red', function() {
|
|
var color = new Color({ hue: 180, saturation: 0, brightness: 0 });
|
|
color.red = 1;
|
|
equals(color, new Color(1, 0, 0));
|
|
});
|
|
|
|
test('Setting Color#gray', function() {
|
|
var color = new Color({ hue: 180, saturation: 0, brightness: 0 });
|
|
color.gray = 0.5;
|
|
equals(color, new Color(0.5));
|
|
});
|
|
|
|
test('Color.read()', function() {
|
|
var color = Color.read([0, 0, 1]);
|
|
equals(color, new Color(0, 0, 1));
|
|
});
|
|
|
|
test('Color#clone()', function() {
|
|
var color = new Color(0, 0, 0);
|
|
equals(function() {
|
|
return color.clone() != color;
|
|
}, true);
|
|
|
|
equals(function() {
|
|
return new Color(color) != color;
|
|
}, true);
|
|
});
|
|
|
|
test('Color#convert()', function() {
|
|
var color = new Color(0, 0, 0);
|
|
var converted = color.convert('rgb');
|
|
equals(function() {
|
|
return converted !== color;
|
|
}, true);
|
|
equals(function() {
|
|
return converted.equals(color);
|
|
}, true);
|
|
});
|
|
|
|
test('Getting saturation from black RGB Color', function() {
|
|
equals(function() {
|
|
return new Color(0, 0, 0).saturation === 0;
|
|
}, true);
|
|
});
|
|
|
|
test('Color#add()', function() {
|
|
var color = new Color(0, 1, 1);
|
|
equals(color.add([1, 0, 0]), new Color([1, 1, 1]));
|
|
equals(color.add([1, 0.5, 0]), new Color([1, 1.5, 1]));
|
|
var color = new Color(0, 0.5, 0);
|
|
equals(color.add(0.5), new Color([0.5, 1, 0.5]));
|
|
});
|
|
|
|
test('Color#subtract()', function() {
|
|
var color = new Color(0, 1, 1);
|
|
equals(color.subtract([0, 1, 1]), new Color([0, 0, 0]));
|
|
equals(color.subtract([0, 0.5, 1]), new Color([0, 0.5, 0]));
|
|
var color = new Color(1, 1, 1);
|
|
equals(color.subtract(0.5), new Color([0.5, 0.5, 0.5]));
|
|
});
|
|
|
|
test('Color#multiply()', function() {
|
|
var color = new Color(1, 0.5, 0.25);
|
|
equals(color.multiply([0.25, 0.5, 1]), new Color([0.25, 0.25, 0.25]));
|
|
var color = new Color(1, 1, 1);
|
|
equals(color.multiply(0.5), new Color([0.5, 0.5, 0.5]));
|
|
var color = new Color(0.5, 0.5, 0.5);
|
|
equals(color.multiply(2), new Color([1, 1, 1]));
|
|
});
|
|
|
|
test('Color#divide()', function() {
|
|
var color = new Color(1, 1, 1);
|
|
equals(color.divide([1, 2, 4]), new Color([1, 0.5, 0.25]));
|
|
var color = new Color(1, 0.5, 0.25);
|
|
equals(color.divide(0.25), new Color([4, 2, 1]));
|
|
var color = new Color(1, 1, 1);
|
|
equals(color.divide(4), new Color([0.25, 0.25, 0.25]));
|
|
});
|
|
|
|
test('Color#equals()', function() {
|
|
var red = new Color('red');
|
|
equals(function() {
|
|
return new Color(1, 0, 0).equals(red);
|
|
}, true);
|
|
equals(function() {
|
|
return new Color(1, 0, 0, 1).equals(red);
|
|
}, true);
|
|
});
|
|
|
|
test('Gradient', function() {
|
|
var stop1 = new GradientStop({ offset: 0.5 });
|
|
var stop2 = new GradientStop('red', 0.75);
|
|
var stop3 = new GradientStop(['white', 1]);
|
|
var stop4 = new GradientStop({ rampPoint: 0.5 }); // deprecated
|
|
var gradient = new Gradient([stop1, stop2, stop3], true);
|
|
equals(function() { return stop1.color; }, new Color(0, 0, 0));
|
|
equals(function() { return stop2.color; }, new Color(1, 0, 0));
|
|
equals(function() { return stop3.color; }, new Color(1, 1, 1));
|
|
equals(function() { return stop4.color; }, new Color(0, 0, 0));
|
|
equals(function() { return stop1.offset; }, 0.5);
|
|
equals(function() { return stop2.offset; }, 0.75);
|
|
equals(function() { return stop3.offset; }, 1);
|
|
equals(function() { return stop4.offset; }, 0.5);
|
|
});
|
|
|
|
test('Gradients with applyMatrix', function() {
|
|
var topLeft = [100, 100];
|
|
var bottomRight = [400, 400];
|
|
var gradientColor = {
|
|
gradient: {
|
|
stops: ['yellow', 'red', 'blue']
|
|
},
|
|
origin: topLeft,
|
|
destination: bottomRight
|
|
}
|
|
|
|
var path = new Path.Rectangle({
|
|
topLeft: topLeft,
|
|
bottomRight: bottomRight,
|
|
fillColor: gradientColor,
|
|
applyMatrix: true
|
|
});
|
|
|
|
var shape = new Shape.Rectangle({
|
|
topLeft: topLeft,
|
|
bottomRight: bottomRight,
|
|
fillColor: gradientColor,
|
|
applyMatrix: false
|
|
});
|
|
|
|
comparePixels(path, shape);
|
|
|
|
path.scale(2);
|
|
path.rotate(45);
|
|
shape.scale(2);
|
|
shape.rotate(45);
|
|
|
|
comparePixels(path, shape);
|
|
});
|
|
|
|
test('Gradients with strokeScaling: false', function() {
|
|
var topLeft = [100, 100];
|
|
var bottomRight = [400, 400];
|
|
var gradientColor = {
|
|
gradient: {
|
|
stops: ['yellow', 'red', 'blue']
|
|
},
|
|
origin: topLeft,
|
|
destination: bottomRight
|
|
}
|
|
|
|
var path = new Shape.Rectangle({
|
|
topLeft: topLeft,
|
|
bottomRight: bottomRight,
|
|
fillColor: gradientColor,
|
|
strokeScaling: true
|
|
});
|
|
|
|
var shape = new Shape.Rectangle({
|
|
topLeft: topLeft,
|
|
bottomRight: bottomRight,
|
|
fillColor: gradientColor,
|
|
strokeScaling: false
|
|
});
|
|
|
|
comparePixels(path, shape);
|
|
|
|
path.scale(2);
|
|
path.rotate(45);
|
|
shape.scale(2);
|
|
shape.rotate(45);
|
|
|
|
comparePixels(path, shape);
|
|
})
|
|
|
|
test('Modifying group.strokeColor for multiple children', function() {
|
|
var item = new Group(new Path(), new Path());
|
|
item.strokeColor = 'red';
|
|
var strokeColor = item.strokeColor;
|
|
item.strokeColor.hue = 50;
|
|
equals(function() { return item.strokeColor !== undefined; }, true);
|
|
});
|