lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

text shadow test

Browse Source
This commit is contained in:
Anton Lavrenov 2016-10-25 07:26:59 -06:00
parent 330ab557ee
commit 34cb84f616
7 changed files with 208 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Shape.js
View File

@ -504,7 +504,7 @@
Konva.Factory.addGetterSetter(Konva.Shape, 'perfectDrawEnabled', true);
/**
* get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to improve performance.
* get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to false to improve performance.
* See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html for more information.
* Default value is true
* @name perfectDrawEnabled

10
src/shapes/Text.js
View File

@ -1,6 +1,8 @@
/*eslint-disable max-depth */
(function() {
'use strict';
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
// constants
var AUTO = 'auto',
//CANVAS = 'canvas',
@ -159,6 +161,14 @@
context.closePath();
context.fillStrokeShape(this);
},
// _useBufferCanvas: function(caching) {
// var useIt = Konva.Shape.prototype._useBufferCanvas.call(this, caching);
// if (useIt) {
// return true;
// }
// return false;
// // return isFirefox && this.hasFill() && this.hasShadow();
// },
setText: function(text) {
var str = Konva.Util._isString(text) ? text : (text || '').toString();
this._setAttr(TEXT, str);

10
test/lib/blanket.js
View File

@ -4712,7 +4712,7 @@ blanket.defaultReporter = function(coverage){
totals.passedBranches += passedBranches;
totals.totalBranches += totalBranches;
// if "data-cover-modulepattern" was provided,
// if "data-cover-modulepattern" was provided,
// track totals per module name as well as globally
if (modulePatternRegex) {
var moduleName = file.match(modulePatternRegex)[1];
@ -4753,7 +4753,7 @@ blanket.defaultReporter = function(coverage){
bodyContent += output;
}
// create temporary function for use by the global totals reporter,
// create temporary function for use by the global totals reporter,
// as well as the per-module totals reporter
var createAggregateTotal = function(numSt, numCov, numBranch, numCovBr, moduleName) {
@ -4771,8 +4771,8 @@ blanket.defaultReporter = function(coverage){
bodyContent += totalsOutput;
};
// if "data-cover-modulepattern" was provided,
// output the per-module totals alongside the global totals
// if "data-cover-modulepattern" was provided,
// output the per-module totals alongside the global totals
if (modulePatternRegex) {
for (var thisModuleName in totals.moduleTotalStatements) {
if (totals.moduleTotalStatements.hasOwnProperty(thisModuleName)) {
@ -5288,4 +5288,4 @@ blanket.defaultReporter = function(coverage){
mocha.run = oldRun;
}
});
})();
})();

100
test/test.html Normal file
View File

@ -0,0 +1,100 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
#buttons {
position: absolute;
top: 5px;
left: 10px;
}
#buttons > input {
padding: 10px;
display: block;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="save">
Save as image
</button>
</div>
<script src="../dist/konva-dev.js"></script>
<script>
// Code goes here
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;
(function() {
for (var i = 0; i < 50; i++) {
layer.add(new Konva.Rect({
x: i * 50,
y: 0,
width: 50,
height: 10000,
fill: Konva.Util.getRandomColor()
}));
}
})();
var box = new Konva.Rect({
x: rectX,
y: rectY,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
document.body.style.cursor = 'default';
});
layer.add(box);
layer.draw();
stage.add(layer);
function exportCanvas() {
var dataURL = stage.toDataURL({
width: 1500,
height: 1000,
// pixelRatio: 2
});
window.open(dataURL);
}
document.getElementById('save').addEventListener('click', exportCanvas, false);
</script>
</body>
</html>

59
test/unit/Container-test.js
View File

@ -1699,43 +1699,45 @@ suite('Container', function() {
radius: 30,
fill: 'red'
});
group.add(circle);
layer.add(group.clip({x:25,y:25,width:50,height:50}));
stage.add(layer);
layer.cache();
stage.draw();
var data = layer.getContext().getImageData(24,50,1,1).data;
var isTransparent = data[3] == 0;
assert.equal(isTransparent, true, 'tested pixel (24,50) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(50,24,1,1).data;
isTransparent = data[3] == 0;
assert.equal(isTransparent, true, 'tested pixel (50,24) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(76,50,1,1).data;
data = layer.getHitCanvas().getContext().getImageData(76,50,1,1).data;
isTransparent = data[3] == 0;
assert.equal(isTransparent, true, 'tested pixel (76,50) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(50,76,1,1).data;
data = layer.getHitCanvas().getContext().getImageData(50,76,1,1).data;
isTransparent = data[3] == 0;
assert.equal(isTransparent, true, 'tested pixel (50,76) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(26,50,1,1).data;
var ratio = layer.getCanvas().getPixelRatio();
data = layer.getContext().getImageData(26 * ratio,50 * ratio,1,1).data;
var isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
assert.equal(isRed, true, 'tested pixel (26,50) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(50,26,1,1).data;
data = layer.getContext().getImageData(50 * ratio,26 * ratio,1,1).data;
isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
assert.equal(isRed, true, 'tested pixel (50,26) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(74,50,1,1).data;
data = layer.getContext().getImageData(74 * ratio,50 * ratio,1,1).data;
isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
assert.equal(isRed, true, 'tested pixel (74,50) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(50,74,1,1).data;
data = layer.getContext().getImageData(50 * ratio,74 * ratio,1,1).data;
isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
assert.equal(isRed, true, 'tested pixel (50,74) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
});
@ -1750,44 +1752,45 @@ suite('Container', function() {
radius: 30,
fill: 'red'
});
group.add(circle);
layer.add(group.clip({x:25,y:25,width:50,height:50}));
stage.add(layer);
layer.cache();
stage.scale({x:2, y:2});
stage.draw();
var data = layer.getContext().getImageData(48,100,1,1).data;
var data = layer.getHitCanvas().getContext().getImageData(48,100,1,1).data;
var isTransparent = data[3] == 0;
assert.equal(isTransparent, true, 'tested pixel (48,100) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(100,48,1,1).data;
data = layer.getHitCanvas().getContext().getImageData(100,48,1,1).data;
isTransparent = data[3] == 0;
assert.equal(isTransparent, true, 'tested pixel (100,48) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(152,100,1,1).data;
data = layer.getHitCanvas().getContext().getImageData(152,100,1,1).data;
isTransparent = data[3] == 0;
assert.equal(isTransparent, true, 'tested pixel (152,100) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(100,152,1,1).data;
data = layer.getHitCanvas().getContext().getImageData(100,152,1,1).data;
isTransparent = data[3] == 0;
assert.equal(isTransparent, true, 'tested pixel (100,152) should be transparent: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(52,100,1,1).data;
var ratio = layer.getCanvas().getPixelRatio();
data = layer.getContext().getImageData(52 * ratio,100 * ratio,1,1).data;
var isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
assert.equal(isRed, true, 'tested pixel (52,100) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(100,52,1,1).data;
data = layer.getContext().getImageData(100 * ratio,52 * ratio,1,1).data;
isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
assert.equal(isRed, true, 'tested pixel (100,52) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(148,100,1,1).data;
data = layer.getContext().getImageData(148 * ratio,100 * ratio,1,1).data;
isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
assert.equal(isRed, true, 'tested pixel (148,100) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
data = layer.getContext().getImageData(100,148,1,1).data;
data = layer.getContext().getImageData(100 * ratio,148 * ratio,1,1).data;
isRed = data[0] == 255 && data[1] == 0 && data[2] == 0 && data[3] == 255;
assert.equal(isRed, true, 'tested pixel (100,148) should be red: ' +data[0]+"_"+data[1]+"_"+data[2]+"_"+data[3]);
});

28
test/unit/Shape-test.js
View File

@ -1148,4 +1148,32 @@ suite('Shape', function() {
});
test('shadow should respect pixel ratio', function() {
var stage = addStage();
var layer1 = new Konva.Layer();
var shape = new Konva.Rect({
width: 50,
height: 50,
fill: 'black',
shadowColor: 'green',
shadowOffsetX: 10,
shadowOffsetY: 10,
opacity: 0.5
});
layer1.add(shape);
stage.add(layer1);
var layer2 = layer1.clone();
console.log(layer2.children.length);
layer2.getCanvas().setPixelRatio(1);
layer1.scaleX(0.5); layer1.scaleY(0.5);
stage.add(layer2);
compareLayers(layer2, layer1, 10);
});
});

33
test/unit/shapes/Text-test.js
View File

@ -82,6 +82,39 @@ suite('Text', function(){
assert.equal(text.getClassName(),'Text', 'getClassName should be Text');
});
test.only('text with fill and shadow', function() {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
x: 10,
y: 10,
text: 'Hello World!',
fontSize: 50,
fill: 'black',
shadowColor: 'darkgrey',
shadowOffsetX: 20,
shadowOffsetY: 20,
shadowBlur: 0
});
layer.add(text);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.textBaseline = 'middle';
context.font = "normal normal 50px Arial";
context.fillStyle = 'darkgrey';
context.fillText('Hello World!', 20, 20 + 25);
context.fillStyle = 'black';
context.fillText('Hello World!', 10, 10 + 25);
compareLayerAndCanvas(layer, canvas, 250);
});
// ======================================================
test('add text with letter spacing', function() {
var stage = addStage();