lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 09:07:30 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

added transform property normalization in setFill() method and also added fill transform unit tests

Browse Source
This commit is contained in:
Eric Rowell
2012-12-08 09:26:16 -08:00
parent 01c5f4f7ca
commit c316edb418
2 changed files with 86 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Shape.js
View File

@@ -233,10 +233,16 @@
var newOrOldFillIsColor = fillType === 'COLOR' || oldFillType === 'COLOR'; var newOrOldFillIsColor = fillType === 'COLOR' || oldFillType === 'COLOR';
var changedFillType = fillType === oldFillType || fillType === 'UNKNOWN'; var changedFillType = fillType === oldFillType || fillType === 'UNKNOWN';
// if fill.offset is defined, normalize the xy value // normalize properties
if(fill.offset !== undefined) { if(fill.offset !== undefined) {
fill.offset = type._getXY(fill.offset); fill.offset = type._getXY(fill.offset);
} }
if(fill.scale !== undefined) {
fill.scale = type._getXY(fill.scale);
}
if(fill.rotationDeg !== undefined) {
fill.rotation = type._degToRad(fill.rotationDeg);
}
/* /*
* merge fill objects if neither the new or old fill * merge fill objects if neither the new or old fill

123
tests/js/unit/shapeTests.js
View File

@@ -76,17 +76,17 @@ Test.Modules.SHAPE = {
id: 'myTriangle', id: 'myTriangle',
draggable: true, draggable: true,
shadow: { shadow: {
color: 'black', color: 'black',
opacity: 0.5, opacity: 0.5,
blur: 10, blur: 10,
offset: 10 offset: 10
} }
}); });
stage.add(layer.add(triangle)); stage.add(layer.add(triangle));
var dataUrl = layer.toDataURL(); var dataUrl = layer.toDataURL();
//console.log(dataUrl); //console.log(dataUrl);
warn(dataUrl === dataUrls['custom shape with two fills and strokes'], 'problem with custom shape with two fills'); warn(dataUrl === dataUrls['custom shape with two fills and strokes'], 'problem with custom shape with two fills');
}, },
@@ -115,7 +115,7 @@ Test.Modules.SHAPE = {
}); });
layer.add(shape); layer.add(shape);
stage.add(layer); stage.add(layer);
}, },
'change custom shape draw func': function(containerId) { 'change custom shape draw func': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -181,43 +181,78 @@ Test.Modules.SHAPE = {
}, },
'add star with translated, scaled, rotated fill': function(containerId) { 'add star with translated, scaled, rotated fill': function(containerId) {
var imageObj = new Image(); var imageObj = new Image();
imageObj.onload = function() { imageObj.onload = function() {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
height: 200 height: 200
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var star = new Kinetic.Star({ var star = new Kinetic.Star({
x: 200, x: 200,
y: 100, y: 100,
numPoints: 5, numPoints: 5,
innerRadius: 40, innerRadius: 40,
outerRadius: 70, outerRadius: 70,
fill: { fill: {
image: imageObj, image: imageObj,
x: -20, x: -20,
y: -20, y: -30,
//scale: {x: 0.5, y: 0.5}, scale: {
offset: {x: 219, y: 150}, x: 0.5,
rotation: Math.PI * 0.5, y: 0.5
repeat: 'no-repeat' },
}, offset: {
stroke: 'blue', x: 219,
strokeWidth: 5, y: 150
draggable: true },
}); rotation: Math.PI * 0.5,
repeat: 'no-repeat'
layer.add(star); },
stage.add(layer); stroke: 'blue',
strokeWidth: 5,
/* draggable: true
var anim = new Kinetic.Animation(function() { });
star.attrs.fill.rotation += 0.02;
}, layer); layer.add(star);
anim.start(); stage.add(layer);
*/
/*
var anim = new Kinetic.Animation(function() {
star.attrs.fill.rotation += 0.02;
}, layer);
anim.start();
*/
test(star.getFill().x === -20, 'star fill x should be -20');
test(star.getFill().y === -30, 'star fill y should be -30');
test(star.getFill().scale.x === 0.5, 'star fill scale x should be 0.5');
test(star.getFill().scale.y === 0.5, 'star fill scale y should be 0.5');
test(star.getFill().offset.x === 219, 'star fill offset x should be 219');
test(star.getFill().offset.y === 150, 'star fill offset y should be 150');
test(star.getFill().rotation === Math.PI * 0.5, 'star fill rotation should be Math.PI * 0.5');
star.setFill({
rotationDeg: 180
});
test(star.getFill().rotation === Math.PI, 'star fill rotation should be Math.PI');
star.setFill({
scale: 1
});
test(star.getFill().scale.x === 1, 'star fill scale x should be 1');
test(star.getFill().scale.y === 1, 'star fill scale y should be 1');
star.setFill({
offset: [100, 120]
});
test(star.getFill().offset.x === 100, 'star fill offset x should be 100');
test(star.getFill().offset.y === 120, 'star fill offset y should be 120');
}; };
imageObj.src = '../assets/darth-vader.jpg'; imageObj.src = '../assets/darth-vader.jpg';
} }