lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 19:07:59 +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
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) { if(!skipShadow && shadow) {
this._applyShadow(shape); this._applyShadow(shape);
} }
var s = fill.start;
var e = fill.end;
// color fill // color fill
switch(fillType) { switch(fillType) {
@@ -128,18 +126,25 @@
context.fill(context); context.fill(context);
break; break;
case 'PATTERN': 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) { if(fill.scale) {
context.scale(fill.scale.x, fill.scale.y); context.scale(fill.scale.x, fill.scale.y);
} }
if(fill.offset) { if(fill.offset) {
context.translate(fill.offset.x, fill.offset.y); context.translate(-1 * fill.offset.x, -1 * fill.offset.y);
} file:///C:/Users/Eric/Documents/Eric/workspaces/KineticJS/dist/kinetic-current.js }
context.fillStyle = context.createPattern(fill.image, repeat); context.fillStyle = context.createPattern(fill.image, fill.repeat || 'repeat');
context.fill(context); context.fill(context);
break; break;
case 'LINEAR_GRADIENT': case 'LINEAR_GRADIENT':
var s = fill.start;
var e = fill.end;
var grd = context.createLinearGradient(s.x, s.y, e.x, e.y); var grd = context.createLinearGradient(s.x, s.y, e.x, e.y);
var colorStops = fill.colorStops; var colorStops = fill.colorStops;
@@ -152,6 +157,8 @@
break; break;
case 'RADIAL_GRADIENT': 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 grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius);
var colorStops = fill.colorStops; var colorStops = fill.colorStops;

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

@@ -178,5 +178,47 @@ Test.Modules.SHAPE = {
var dataUrl = layer.toDataURL(); var dataUrl = layer.toDataURL();
test(dataUrls['change custom shape draw func'] === dataUrl, 'problem with setDrawFunc'); 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';
} }
}; };