mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
performance improvement
This commit is contained in:
lavrton
parent
9b27ce6593
commit
367d829784
@ -546,19 +546,13 @@
|
||||
},
|
||||
_applyShadow: function(shape) {
|
||||
var util = Konva.Util,
|
||||
absOpacity = shape.getAbsoluteOpacity(),
|
||||
color = util.get(shape.getShadowColor(), 'black'),
|
||||
color = util.get(shape.getShadowRGBA(), 'black'),
|
||||
blur = util.get(shape.getShadowBlur(), 5),
|
||||
shadowOpacity = util.get(shape.getShadowOpacity(), 1),
|
||||
offset = util.get(shape.getShadowOffset(), {
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
|
||||
if(shadowOpacity) {
|
||||
this.setAttr('globalAlpha', shadowOpacity * absOpacity);
|
||||
}
|
||||
|
||||
this.setAttr('shadowColor', color);
|
||||
this.setAttr('shadowBlur', blur);
|
||||
this.setAttr('shadowOffsetX', offset.x);
|
||||
|
||||
50
src/Shape.js
50
src/Shape.js
@ -1,5 +1,6 @@
|
||||
(function() {
|
||||
var HAS_SHADOW = 'hasShadow';
|
||||
var SHADOW_RGBA = 'shadowRGBA';
|
||||
|
||||
function _fillFunc(context) {
|
||||
context.fill();
|
||||
@ -18,6 +19,10 @@
|
||||
this._clearCache(HAS_SHADOW);
|
||||
}
|
||||
|
||||
function _clearGetShadowRGBACache() {
|
||||
this._clearCache(SHADOW_RGBA);
|
||||
}
|
||||
|
||||
Konva.Util.addMethods(Konva.Shape, {
|
||||
__init: function(config) {
|
||||
this.nodeType = 'Shape';
|
||||
@ -44,6 +49,8 @@
|
||||
Konva.Node.call(this, config);
|
||||
|
||||
this.on('shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva', _clearHasShadowCache);
|
||||
|
||||
this.on('shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva', _clearGetShadowRGBACache);
|
||||
},
|
||||
hasChildren: function() {
|
||||
return false;
|
||||
@ -81,6 +88,15 @@
|
||||
_hasShadow: function() {
|
||||
return this.getShadowEnabled() && (this.getShadowOpacity() !== 0 && !!(this.getShadowColor() || this.getShadowBlur() || this.getShadowOffsetX() || this.getShadowOffsetY()));
|
||||
},
|
||||
getShadowRGBA: function() {
|
||||
return this._getCache(SHADOW_RGBA, this._getShadowRGBA);
|
||||
},
|
||||
_getShadowRGBA: function() {
|
||||
if (this.hasShadow()) {
|
||||
var rgba = Konva.Util.colorToRGBA(this.shadowColor());
|
||||
return 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + (rgba.a * (this.getShadowOpacity() || 1)) + ')';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* returns whether or not the shape will be filled
|
||||
* @method
|
||||
@ -138,6 +154,7 @@
|
||||
cachedCanvas = this._cache.canvas,
|
||||
drawFunc = this.sceneFunc(),
|
||||
hasShadow = this.hasShadow(),
|
||||
hasStroke = this.hasStroke(),
|
||||
stage, bufferCanvas, bufferContext;
|
||||
|
||||
if(this.isVisible()) {
|
||||
@ -200,26 +217,29 @@
|
||||
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
|
||||
}
|
||||
|
||||
if (hasShadow && !canvas.hitCanvas) {
|
||||
if (hasShadow && hasStroke && !canvas.hitCanvas) {
|
||||
context.save();
|
||||
// apply shadow
|
||||
context._applyOpacity(this);
|
||||
context._applyShadow(this);
|
||||
drawFunc.call(this, context);
|
||||
context.restore();
|
||||
// if shape has stroke we need to redraw shape
|
||||
// otherwise we will see shadow under stroke (and over fill)
|
||||
// but I think is is unexpected behavior
|
||||
if (this.hasFill()) {
|
||||
drawFunc.call(this, context);
|
||||
}
|
||||
} else if (hasShadow && !canvas.hitCanvas) {
|
||||
context.save();
|
||||
context._applyOpacity(this);
|
||||
context._applyShadow(this);
|
||||
drawFunc.call(this, context);
|
||||
context.restore();
|
||||
} else {
|
||||
context._applyOpacity(this);
|
||||
drawFunc.call(this, context);
|
||||
}
|
||||
|
||||
context._applyOpacity(this);
|
||||
drawFunc.call(this, context);
|
||||
|
||||
// // clear stroke shadow
|
||||
// if (hasShadow && !canvas.hitCanvas) {
|
||||
// context.setAttr('shadowBlur', 0);
|
||||
// context.setAttr('shadowColor', 0);
|
||||
// context.setAttr('shadowOffsetX', 0);
|
||||
// context.setAttr('shadowOffsetY', 0);
|
||||
// context.stroke();
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
context.restore();
|
||||
}
|
||||
|
||||
241
src/Util.js
241
src/Util.js
@ -305,26 +305,155 @@
|
||||
KONVA_ERROR = 'Konva error: ',
|
||||
RGB_PAREN = 'rgb(',
|
||||
COLORS = {
|
||||
aqua: [0,255,255],
|
||||
lime: [0,255,0],
|
||||
silver: [192,192,192],
|
||||
black: [0,0,0],
|
||||
maroon: [128,0,0],
|
||||
teal: [0,128,128],
|
||||
blue: [0,0,255],
|
||||
navy: [0,0,128],
|
||||
white: [255,255,255],
|
||||
fuchsia: [255,0,255],
|
||||
olive:[128,128,0],
|
||||
yellow: [255,255,0],
|
||||
orange: [255,165,0],
|
||||
gray: [128,128,128],
|
||||
purple: [128,0,128],
|
||||
green: [0,128,0],
|
||||
red: [255,0,0],
|
||||
pink: [255,192,203],
|
||||
cyan: [0,255,255],
|
||||
transparent: [255,255,255,0]
|
||||
aliceblue: [240, 248, 255],
|
||||
antiquewhite: [250, 235, 215],
|
||||
aqua: [0, 255, 255],
|
||||
aquamarine: [127, 255, 212],
|
||||
azure: [240, 255, 255],
|
||||
beige: [245, 245, 220],
|
||||
bisque: [255, 228, 196],
|
||||
black: [0, 0, 0],
|
||||
blanchedalmond: [255, 235, 205],
|
||||
blue: [0, 0, 255],
|
||||
blueviolet: [138, 43, 226],
|
||||
brown: [165, 42, 42],
|
||||
burlywood: [222, 184, 135],
|
||||
cadetblue: [95, 158, 160],
|
||||
chartreuse: [127, 255, 0],
|
||||
chocolate: [210, 105, 30],
|
||||
coral: [255, 127, 80],
|
||||
cornflowerblue: [100, 149, 237],
|
||||
cornsilk: [255, 248, 220],
|
||||
crimson: [220, 20, 60],
|
||||
cyan: [0, 255, 255],
|
||||
darkblue: [0, 0, 139],
|
||||
darkcyan: [0, 139, 139],
|
||||
darkgoldenrod: [184, 132, 11],
|
||||
darkgray: [169, 169, 169],
|
||||
darkgreen: [0, 100, 0],
|
||||
darkgrey: [169, 169, 169],
|
||||
darkkhaki: [189, 183, 107],
|
||||
darkmagenta: [139, 0, 139],
|
||||
darkolivegreen: [85, 107, 47],
|
||||
darkorange: [255, 140, 0],
|
||||
darkorchid: [153, 50, 204],
|
||||
darkred: [139, 0, 0],
|
||||
darksalmon: [233, 150, 122],
|
||||
darkseagreen: [143, 188, 143],
|
||||
darkslateblue: [72, 61, 139],
|
||||
darkslategray: [47, 79, 79],
|
||||
darkslategrey: [47, 79, 79],
|
||||
darkturquoise: [0, 206, 209],
|
||||
darkviolet: [148, 0, 211],
|
||||
deeppink: [255, 20, 147],
|
||||
deepskyblue: [0, 191, 255],
|
||||
dimgray: [105, 105, 105],
|
||||
dimgrey: [105, 105, 105],
|
||||
dodgerblue: [30, 144, 255],
|
||||
firebrick: [178, 34, 34],
|
||||
floralwhite: [255, 255, 240],
|
||||
forestgreen: [34, 139, 34],
|
||||
fuchsia: [255, 0, 255],
|
||||
gainsboro: [220, 220, 220],
|
||||
ghostwhite: [248, 248, 255],
|
||||
gold: [255, 215, 0],
|
||||
goldenrod: [218, 165, 32],
|
||||
gray: [128, 128, 128],
|
||||
green: [0, 128, 0],
|
||||
greenyellow: [173, 255, 47],
|
||||
grey: [128, 128, 128],
|
||||
honeydew: [240, 255, 240],
|
||||
hotpink: [255, 105, 180],
|
||||
indianred: [205, 92, 92],
|
||||
indigo: [75, 0, 130],
|
||||
ivory: [255, 255, 240],
|
||||
khaki: [240, 230, 140],
|
||||
lavender: [230, 230, 250],
|
||||
lavenderblush: [255, 240, 245],
|
||||
lawngreen: [124, 252, 0],
|
||||
lemonchiffon: [255, 250, 205],
|
||||
lightblue: [173, 216, 230],
|
||||
lightcoral: [240, 128, 128],
|
||||
lightcyan: [224, 255, 255],
|
||||
lightgoldenrodyellow: [250, 250, 210],
|
||||
lightgray: [211, 211, 211],
|
||||
lightgreen: [144, 238, 144],
|
||||
lightgrey: [211, 211, 211],
|
||||
lightpink: [255, 182, 193],
|
||||
lightsalmon: [255, 160, 122],
|
||||
lightseagreen: [32, 178, 170],
|
||||
lightskyblue: [135, 206, 250],
|
||||
lightslategray: [119, 136, 153],
|
||||
lightslategrey: [119, 136, 153],
|
||||
lightsteelblue: [176, 196, 222],
|
||||
lightyellow: [255, 255, 224],
|
||||
lime: [0, 255, 0],
|
||||
limegreen: [50, 205, 50],
|
||||
linen: [250, 240, 230],
|
||||
magenta: [255, 0, 255],
|
||||
maroon: [128, 0, 0],
|
||||
mediumaquamarine: [102, 205, 170],
|
||||
mediumblue: [0, 0, 205],
|
||||
mediumorchid: [186, 85, 211],
|
||||
mediumpurple: [147, 112, 219],
|
||||
mediumseagreen: [60, 179, 113],
|
||||
mediumslateblue: [123, 104, 238],
|
||||
mediumspringgreen: [0, 250, 154],
|
||||
mediumturquoise: [72, 209, 204],
|
||||
mediumvioletred: [199, 21, 133],
|
||||
midnightblue: [25, 25, 112],
|
||||
mintcream: [245, 255, 250],
|
||||
mistyrose: [255, 228, 225],
|
||||
moccasin: [255, 228, 181],
|
||||
navajowhite: [255, 222, 173],
|
||||
navy: [0, 0, 128],
|
||||
oldlace: [253, 245, 230],
|
||||
olive: [128, 128, 0],
|
||||
olivedrab: [107, 142, 35],
|
||||
orange: [255, 165, 0],
|
||||
orangered: [255, 69, 0],
|
||||
orchid: [218, 112, 214],
|
||||
palegoldenrod: [238, 232, 170],
|
||||
palegreen: [152, 251, 152],
|
||||
paleturquoise: [175, 238, 238],
|
||||
palevioletred: [219, 112, 147],
|
||||
papayawhip: [255, 239, 213],
|
||||
peachpuff: [255, 218, 185],
|
||||
peru: [205, 133, 63],
|
||||
pink: [255, 192, 203],
|
||||
plum: [221, 160, 203],
|
||||
powderblue: [176, 224, 230],
|
||||
purple: [128, 0, 128],
|
||||
rebeccapurple: [102, 51, 153],
|
||||
red: [255, 0, 0],
|
||||
rosybrown: [188, 143, 143],
|
||||
royalblue: [65, 105, 225],
|
||||
saddlebrown: [139, 69, 19],
|
||||
salmon: [250, 128, 114],
|
||||
sandybrown: [244, 164, 96],
|
||||
seagreen: [46, 139, 87],
|
||||
seashell: [255, 245, 238],
|
||||
sienna: [160, 82, 45],
|
||||
silver: [192, 192, 192],
|
||||
skyblue: [135, 206, 235],
|
||||
slateblue: [106, 90, 205],
|
||||
slategray: [119, 128, 144],
|
||||
slategrey: [119, 128, 144],
|
||||
snow: [255, 255, 250],
|
||||
springgreen: [0, 255, 127],
|
||||
steelblue: [70, 130, 180],
|
||||
tan: [210, 180, 140],
|
||||
teal: [0, 128, 128],
|
||||
thistle: [216, 191, 216],
|
||||
transparent: [255,255,255,0],
|
||||
tomato: [255, 99, 71],
|
||||
turquoise: [64, 224, 208],
|
||||
violet: [238, 130, 238],
|
||||
wheat: [245, 222, 179],
|
||||
white: [255, 255, 255],
|
||||
whitesmoke: [245, 245, 245],
|
||||
yellow: [255, 255, 0],
|
||||
yellowgreen: [154, 205, 5]
|
||||
},
|
||||
|
||||
RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
|
||||
@ -582,6 +711,78 @@
|
||||
};
|
||||
}
|
||||
},
|
||||
// convert any color string to RGBA object
|
||||
// from https://github.com/component/color-parser
|
||||
colorToRGBA : function(str) {
|
||||
str = str || 'black';
|
||||
return Konva.Util._namedColorToRBA(str)
|
||||
|| Konva.Util._hex3ColorToRGBA(str)
|
||||
|| Konva.Util._hex6ColorToRGBA(str)
|
||||
|| Konva.Util._rgbColorToRGBA(str)
|
||||
|| Konva.Util._rgbaColorToRGBA(str);
|
||||
},
|
||||
// Parse named css color. Like "green"
|
||||
_namedColorToRBA : function(str) {
|
||||
var c = COLORS[str.toLowerCase()];
|
||||
if (!c) {
|
||||
return;
|
||||
}
|
||||
return {
|
||||
r: c[0],
|
||||
g: c[1],
|
||||
b: c[2],
|
||||
a: 1
|
||||
};
|
||||
},
|
||||
// Parse rgb(n, n, n)
|
||||
_rgbColorToRGBA : function(str) {
|
||||
if (str.indexOf('rgb(') === 0) {
|
||||
str = str.match(/rgb\(([^)]+)\)/)[1];
|
||||
var parts = str.split(/ *, */).map(Number);
|
||||
return {
|
||||
r: parts[0],
|
||||
g: parts[1],
|
||||
b: parts[2],
|
||||
a: 1
|
||||
};
|
||||
}
|
||||
},
|
||||
// Parse rgba(n, n, n, n)
|
||||
_rgbaColorToRGBA : function(str) {
|
||||
if (str.indexOf('rgba(') === 0) {
|
||||
str = str.match(/rgba\(([^)]+)\)/)[1];
|
||||
var parts = str.split(/ *, */).map(Number);
|
||||
return {
|
||||
r: parts[0],
|
||||
g: parts[1],
|
||||
b: parts[2],
|
||||
a: parts[3]
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
// Parse #nnnnnn
|
||||
_hex6ColorToRGBA : function(str) {
|
||||
if ((str[0] === '#') && (str.length === 7)) {
|
||||
return {
|
||||
r: parseInt(str.slice(1, 3), 16),
|
||||
g: parseInt(str.slice(3, 5), 16),
|
||||
b: parseInt(str.slice(5, 7), 16),
|
||||
a: 1
|
||||
};
|
||||
}
|
||||
},
|
||||
// Parse #nnn
|
||||
_hex3ColorToRGBA : function(str) {
|
||||
if ((str[0] === '#') && (str.length === 4)) {
|
||||
return {
|
||||
r: parseInt(str[1] + str[1], 16),
|
||||
g: parseInt(str[2] + str[2], 16),
|
||||
b: parseInt(str[3] + str[3], 16),
|
||||
a: 1
|
||||
};
|
||||
}
|
||||
},
|
||||
// o1 takes precedence over o2
|
||||
_merge: function(o1, o2) {
|
||||
var retObj = this._clone(o2);
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
if (this.hasFill() || this.hasStroke() || this.hasShadow()) {
|
||||
if (this.hasFill() || this.hasStroke()) {
|
||||
context.beginPath();
|
||||
context.rect(0, 0, width, height);
|
||||
context.closePath();
|
||||
|
||||
@ -101,6 +101,7 @@
|
||||
n;
|
||||
|
||||
context.setAttr('font', this._getContextFont());
|
||||
|
||||
context.setAttr('textBaseline', MIDDLE);
|
||||
context.setAttr('textAlign', LEFT);
|
||||
context.save();
|
||||
@ -128,6 +129,7 @@
|
||||
}
|
||||
|
||||
this.partialText = text;
|
||||
|
||||
context.fillStrokeShape(this);
|
||||
context.restore();
|
||||
context.translate(0, lineHeightPx);
|
||||
|
||||
@ -5,6 +5,7 @@ var assert = chai.assert,
|
||||
origAssertEqual = assert.equal,
|
||||
origAssert = assert,
|
||||
origNotEqual = assert.notEqual,
|
||||
origDeepEqual = assert.deepEqual,
|
||||
assertionCount = 0,
|
||||
assertions = document.createElement('em');
|
||||
|
||||
@ -34,6 +35,11 @@ function init() {
|
||||
assertions.innerHTML = ++assertionCount;
|
||||
};
|
||||
|
||||
assert.deepEqual = function() {
|
||||
origDeepEqual.apply(this, arguments);
|
||||
assertions.innerHTML = ++assertionCount;
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var mochaStats = document.getElementById('mocha-stats');
|
||||
|
||||
|
||||
@ -375,33 +375,49 @@ suite('Shape', function() {
|
||||
|
||||
// ======================================================
|
||||
test('fill with shadow and opacity', function(){
|
||||
var stage = addStage();
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
opacity: 0.5,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: {x:10, y:10},
|
||||
shadowOpacity: 0.5
|
||||
});
|
||||
var rect = new Konva.Rect({
|
||||
x: 100,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 50,
|
||||
fill: 'green',
|
||||
opacity: 0.5,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOffset: {x:10, y:10},
|
||||
shadowOpacity: 0.5
|
||||
});
|
||||
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
assert.equal(rect.getX(), 100);
|
||||
assert.equal(rect.getY(), 50);
|
||||
assert.equal(rect.getX(), 100);
|
||||
assert.equal(rect.getY(), 50);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.globalAlpha = 0.5;
|
||||
// rect
|
||||
context.beginPath();
|
||||
context.rect(100, 50, 100, 50);
|
||||
context.closePath();
|
||||
|
||||
context.fillStyle = 'green';
|
||||
context.shadowColor = 'rgba(0,0,0,0.5)';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = 10;
|
||||
context.shadowOffsetY = 10;
|
||||
context.fill();
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();restore();');
|
||||
|
||||
});
|
||||
|
||||
@ -431,9 +447,29 @@ suite('Shape', function() {
|
||||
assert.equal(rect.getX(), 100);
|
||||
assert.equal(rect.getY(), 50);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.globalAlpha = 0.5;
|
||||
// rect
|
||||
context.beginPath();
|
||||
context.rect(100, 50, 100, 50);
|
||||
context.closePath();
|
||||
|
||||
context.strokeStyle = 'red';
|
||||
context.lineWidth = 20;
|
||||
|
||||
|
||||
context.shadowColor = 'rgba(0,0,0,0.5)';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = 10;
|
||||
context.shadowOffsetY = 10;
|
||||
context.stroke();
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();restore();');
|
||||
});
|
||||
|
||||
|
||||
@ -533,15 +569,8 @@ suite('Shape', function() {
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test.skip('fill and stroke with shadow and opacity', function(){
|
||||
test('fill and stroke with shadow and opacity', function(){
|
||||
var stage = addStage();
|
||||
// stage.bufferCanvas2._canvas.style.position = 'relative';
|
||||
|
||||
// document.body.appendChild(stage.bufferCanvas2._canvas);
|
||||
|
||||
stage.bufferCanvas._canvas.style.position = 'relative';
|
||||
|
||||
document.body.appendChild(stage.bufferCanvas._canvas);
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var rect = new Konva.Rect({
|
||||
@ -553,8 +582,8 @@ suite('Shape', function() {
|
||||
stroke: 'black',
|
||||
strokeWidth: 10,
|
||||
shadowColor: 'grey',
|
||||
shadowBlur: 10,
|
||||
opacity : 0.5,
|
||||
shadowBlur : 1,
|
||||
shadowOffset: {
|
||||
x: 20,
|
||||
y: 20
|
||||
@ -565,24 +594,21 @@ suite('Shape', function() {
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
console.log(trace);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
context.globalAlpha = 0.60;
|
||||
context.globalAlpha = 0.5;
|
||||
|
||||
// draw shadow
|
||||
var offset = 200;
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.rect(95, 45, 110, 60);
|
||||
context.rect(95 - offset, 45 - offset, 110, 60);
|
||||
context.closePath();
|
||||
context.shadowColor = 'grey';
|
||||
context.shadowBlur = 10;
|
||||
context.shadowOffsetX = 20;
|
||||
context.shadowOffsetY = 20;
|
||||
context.shadowBlur = 1;
|
||||
context.shadowOffsetX = 20 + offset;
|
||||
context.shadowOffsetY = 20 + offset;
|
||||
context.fillStyle = 'black';
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
@ -597,14 +623,88 @@ suite('Shape', function() {
|
||||
context.lineWidth = 10;
|
||||
context.strokeStyle = 'black';
|
||||
context.stroke();
|
||||
context.fillStyle = 'green';
|
||||
context.fillRect(105, 55, 90, 40);
|
||||
context.restore();
|
||||
// context.stroke();
|
||||
// console.log(layer.getContext().getTrace());
|
||||
compareLayerAndCanvas(layer, canvas, 10);
|
||||
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.fillStyle = 'green';
|
||||
context.rect(105, 55, 90, 40);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();save();shadowColor=rgba(128,128,128,1);shadowBlur=1;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();restore();');
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('text with fill and stroke with shadow', function(){
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var text = new Konva.Text({
|
||||
x: 50,
|
||||
y: 50,
|
||||
text : 'Test TEXT',
|
||||
fontSize : 50,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
shadowColor: 'grey',
|
||||
shadowBlur: 2,
|
||||
shadowOffset: {
|
||||
x: 20,
|
||||
y: 20
|
||||
}
|
||||
});
|
||||
|
||||
layer.add(text);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
context.save();
|
||||
context.shadowColor = 'grey';
|
||||
context.shadowBlur = 2;
|
||||
context.shadowOffsetX = 20;
|
||||
context.shadowOffsetY = 20;
|
||||
context.font = 'normal 50px Arial';
|
||||
context.textBaseline = 'middle';
|
||||
|
||||
context.fillStyle = 'green';
|
||||
context.fillText('Test TEXT', 50, 75);
|
||||
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = 'black';
|
||||
context.strokeText('Test TEXT', 50, 75);
|
||||
|
||||
context.stroke();
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
// draw text again to remove shadow under stroke
|
||||
context.font = 'normal 50px Arial';
|
||||
context.textBaseline = 'middle';
|
||||
context.fillText('Test TEXT', 50, 75);
|
||||
context.fillStyle = 'green';
|
||||
context.fillText('Test TEXT', 50, 75);
|
||||
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = 'black';
|
||||
context.strokeText('Test TEXT', 50, 75);
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 50);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// ======================================================
|
||||
test('shape intersect with shadow', function(){
|
||||
var stage = addStage();
|
||||
@ -858,4 +958,31 @@ suite('Shape', function() {
|
||||
var trace = layer.getHitCanvas().getContext().getTrace(true);
|
||||
assert.equal(trace, 'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();');
|
||||
});
|
||||
|
||||
test('cache shadow color rgba', function() {
|
||||
var circle = new Konva.Circle({
|
||||
fill : 'green',
|
||||
radius : 50
|
||||
});
|
||||
// no shadow on start
|
||||
assert.equal(circle.hasShadow(), false);
|
||||
assert.equal(circle.getShadowRGBA(), undefined);
|
||||
|
||||
// set shadow
|
||||
circle.shadowColor('black');
|
||||
assert.equal(circle.hasShadow(), true);
|
||||
assert.equal(circle.getShadowRGBA(), 'rgba(0,0,0,1)');
|
||||
|
||||
// set another shadow property
|
||||
circle.shadowOpacity(0.2);
|
||||
assert.equal(circle.getShadowRGBA(), 'rgba(0,0,0,0.2)');
|
||||
|
||||
circle.shadowColor('rgba(10,10,10,0.5)');
|
||||
assert.equal(circle.getShadowRGBA(), 'rgba(10,10,10,0.1)');
|
||||
|
||||
|
||||
// reset shadow
|
||||
circle.shadowColor(null);
|
||||
assert.equal(circle.getShadowRGBA(), undefined);
|
||||
});
|
||||
});
|
||||
@ -15,6 +15,28 @@ suite('Util', function(){
|
||||
blue: 200,
|
||||
alpha: 0.5
|
||||
}), 'rgba(100,150,200,0.5)');
|
||||
|
||||
});
|
||||
|
||||
test('test colorToRGBA', function(){
|
||||
assert.deepEqual(Konva.Util.colorToRGBA('black'), {
|
||||
r : 0,
|
||||
g : 0,
|
||||
b : 0,
|
||||
a : 1
|
||||
});
|
||||
|
||||
assert.deepEqual(Konva.Util.colorToRGBA('#ffcc00'), {
|
||||
r : 255,
|
||||
g : 204,
|
||||
b : 0,
|
||||
a : 1
|
||||
});
|
||||
|
||||
assert.deepEqual(Konva.Util.colorToRGBA(), {
|
||||
r : 0,
|
||||
g : 0,
|
||||
b : 0,
|
||||
a : 1
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
suite('Label', function() {
|
||||
// ======================================================
|
||||
test.skip('add label', function() {
|
||||
test('add label', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
|
||||
@ -248,7 +248,7 @@ suite('Image', function(){
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
darth = new Konva.Image({
|
||||
var darth = new Konva.Image({
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
@ -259,7 +259,7 @@ suite('Image', function(){
|
||||
opacity: 0.5,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 10,
|
||||
shadowOpacity: 0.5,
|
||||
shadowOpacity: 0.1,
|
||||
shadowOffset: {x: 20, y:20}
|
||||
});
|
||||
|
||||
@ -268,7 +268,7 @@ suite('Image', function(){
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();globalAlpha=0.5;beginPath();rect(0,0,100,100);closePath();drawImage([object HTMLImageElement],0,0,100,100);restore();');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();restore();');
|
||||
|
||||
done();
|
||||
|
||||
@ -277,13 +277,13 @@ suite('Image', function(){
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test.skip('image with stroke, opacity and shadow', function(done) {
|
||||
test('image with stroke, opacity and shadow', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
darth = new Konva.Image({
|
||||
var darth = new Konva.Image({
|
||||
x: 200,
|
||||
y: 60,
|
||||
image: imageObj,
|
||||
@ -305,7 +305,7 @@ suite('Image', function(){
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();save();globalAlpha=0.25;shadowColor=black;shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLCanvasElement],0,0);restore();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();');
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();restore();');
|
||||
|
||||
done();
|
||||
|
||||
|
||||
@ -132,10 +132,31 @@ suite('Line', function() {
|
||||
layer.add(line);
|
||||
stage.add(layer);
|
||||
|
||||
var canvas = createCanvas();
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
context.save();
|
||||
context.lineJoin = 'round';
|
||||
context.lineCap = 'round';
|
||||
context.lineWidth = 20;
|
||||
context.strokeStyle = 'blue';
|
||||
|
||||
context.shadowColor = 'rgba(0,0,0,0.5)';
|
||||
context.shadowBlur = 20;
|
||||
context.shadowOffsetX = 10;
|
||||
context.shadowOffsetY = 10;
|
||||
context.moveTo(73, 160);
|
||||
context.lineTo(340, 23);
|
||||
|
||||
context.stroke();
|
||||
context.fill();
|
||||
context.restore();
|
||||
|
||||
compareLayerAndCanvas(layer, canvas, 5);
|
||||
|
||||
var trace = layer.getContext().getTrace();
|
||||
//console.log(trace);
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();globalAlpha=0.5;shadowColor=black;shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();');
|
||||
|
||||
assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();restore();');
|
||||
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user