lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-07-15 22:03:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fill patterns can now be translated, rotated, scaled, and offset like nodes

Browse Source
This commit is contained in:
Eric Rowell 2012-12-07 23:25:33 -08:00
parent 9bbd5e41ec
commit 01c5f4f7ca
2 changed files with 55 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/Canvas.js
View File

@ -118,8 +118,6 @@
if(!skipShadow && shadow) {
this._applyShadow(shape);
}
var s = fill.start;
var e = fill.end;
// color fill
switch(fillType) {
@ -128,18 +126,25 @@
context.fill(context);
break;
case 'PATTERN':
var repeat = !fill.repeat ? 'repeat' : fill.repeat;
if(fill.x || fill.y) {
context.translate(fill.x || 0, fill.y || 0);
}
if(fill.rotation) {
context.rotate(fill.rotation);
}
if(fill.scale) {
context.scale(fill.scale.x, fill.scale.y);
}
if(fill.offset) {
context.translate(fill.offset.x, fill.offset.y);
} file:///C:/Users/Eric/Documents/Eric/workspaces/KineticJS/dist/kinetic-current.js
context.translate(-1 * fill.offset.x, -1 * fill.offset.y);
}
context.fillStyle = context.createPattern(fill.image, repeat);
context.fillStyle = context.createPattern(fill.image, fill.repeat || 'repeat');
context.fill(context);
break;
case 'LINEAR_GRADIENT':
var s = fill.start;
var e = fill.end;
var grd = context.createLinearGradient(s.x, s.y, e.x, e.y);
var colorStops = fill.colorStops;
@ -152,6 +157,8 @@
break;
case 'RADIAL_GRADIENT':
var s = fill.start;
var e = fill.end;
var grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius);
var colorStops = fill.colorStops;

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

@ -178,5 +178,47 @@ Test.Modules.SHAPE = {
var dataUrl = layer.toDataURL();
test(dataUrls['change custom shape draw func'] === dataUrl, 'problem with setDrawFunc');
},
'add star with translated, scaled, rotated fill': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: {
image: imageObj,
x: -20,
y: -20,
//scale: {x: 0.5, y: 0.5},
offset: {x: 219, y: 150},
rotation: Math.PI * 0.5,
repeat: 'no-repeat'
},
stroke: 'blue',
strokeWidth: 5,
draggable: true
});
layer.add(star);
stage.add(layer);
/*
var anim = new Kinetic.Animation(function() {
star.attrs.fill.rotation += 0.02;
}, layer);
anim.start();
*/
};
imageObj.src = '../assets/darth-vader.jpg';
}
};