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

finished up pattern fill support

Browse Source
This commit is contained in:
Eric Rowell 2012-05-13 10:27:40 -07:00
parent 81df49e75d
commit e4f5e11792
5 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: May 12 2012
* Date: May 13 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -174,6 +174,10 @@ Kinetic.GlobalObject = {
}
},
_setXY: function(obj, key, val) {
if(obj[key] === undefined) {
obj[key] = {};
}
// val is an array
if(Kinetic.GlobalObject._isArray(val)) {
obj[key].x = val[0];
@ -191,6 +195,10 @@ Kinetic.GlobalObject = {
}
},
_setSize: function(obj, key, val) {
if(obj[key] === undefined) {
obj[key] = {};
}
// val is an array
if(Kinetic.GlobalObject._isArray(val)) {
obj[key].x = val[2];
@ -2553,14 +2561,26 @@ Kinetic.Shape.prototype = {
// color fill
if( typeof fill == 'string') {
f = this.attrs.fill;
context.fillStyle = f;
context.fill();
}
// pattern fill
else if(fill.image !== undefined) {
var o = Kinetic.GlobalObject._getPoint(fill.offset);
var o = {};
// set offset o
if(fill.offset !== undefined) {
Kinetic.GlobalObject._setXY(o, 'pos', fill.offset);
}
var repeat = fill.repeat === undefined ? 'repeat' : fill.repeat;
f = context.createPattern(fill.image, repeat);
context.save();
context.translate(o.pos.x, o.pos.y);
context.fillStyle = f;
context.fill();
context.restore();
}
// gradient fill
else if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
@ -2569,6 +2589,8 @@ Kinetic.Shape.prototype = {
grd.addColorStop(0, s.color);
grd.addColorStop(1, e.color);
f = grd;
context.fillStyle = f;
context.fill();
}
// radial gradient
else if(s.radius !== undefined && e.radius !== undefined) {
@ -2577,13 +2599,17 @@ Kinetic.Shape.prototype = {
grd.addColorStop(0, s.color);
grd.addColorStop(1, e.color);
f = grd;
context.fillStyle = f;
context.fill();
}
else {
f = 'black';
context.fillStyle = f;
context.fill();
}
context.fillStyle = f;
context.fill();
// TODO: if using fill offset, save context, translate offset, fill(), then restore
}
},
/**

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/GlobalObject.js
View File

@ -146,6 +146,10 @@ Kinetic.GlobalObject = {
}
},
_setXY: function(obj, key, val) {
if(obj[key] === undefined) {
obj[key] = {};
}
// val is an array
if(Kinetic.GlobalObject._isArray(val)) {
obj[key].x = val[0];
@ -163,6 +167,10 @@ Kinetic.GlobalObject = {
}
},
_setSize: function(obj, key, val) {
if(obj[key] === undefined) {
obj[key] = {};
}
// val is an array
if(Kinetic.GlobalObject._isArray(val)) {
obj[key].x = val[2];

26
src/Shape.js
View File

@ -116,14 +116,26 @@ Kinetic.Shape.prototype = {
// color fill
if( typeof fill == 'string') {
f = this.attrs.fill;
context.fillStyle = f;
context.fill();
}
// pattern fill
else if(fill.image !== undefined) {
var o = Kinetic.GlobalObject._getPoint(fill.offset);
var o = {};
// set offset o
if(fill.offset !== undefined) {
Kinetic.GlobalObject._setXY(o, 'pos', fill.offset);
}
var repeat = fill.repeat === undefined ? 'repeat' : fill.repeat;
f = context.createPattern(fill.image, repeat);
context.save();
context.translate(o.pos.x, o.pos.y);
context.fillStyle = f;
context.fill();
context.restore();
}
// gradient fill
else if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
@ -132,6 +144,8 @@ Kinetic.Shape.prototype = {
grd.addColorStop(0, s.color);
grd.addColorStop(1, e.color);
f = grd;
context.fillStyle = f;
context.fill();
}
// radial gradient
else if(s.radius !== undefined && e.radius !== undefined) {
@ -140,13 +154,17 @@ Kinetic.Shape.prototype = {
grd.addColorStop(0, s.color);
grd.addColorStop(1, e.color);
f = grd;
context.fillStyle = f;
context.fill();
}
else {
f = 'black';
context.fillStyle = f;
context.fill();
}
context.fillStyle = f;
context.fill();
// TODO: if using fill offset, save context, translate offset, fill(), then restore
}
},
/**

5
tests/js/unitTests.js
View File

@ -92,8 +92,8 @@ Test.prototype.tests = {
radius: 70,
fill: {
image: imageObj,
repeat: 'repeat',
offset: [20, 20]
repeat: 'no-repeat',
offset: [-200, -70]
},
stroke: 'black',
strokeWidth: 4,
@ -105,6 +105,7 @@ Test.prototype.tests = {
layer.add(group);
stage.add(layer);
test(circle.getFill().repeat === 'no-repeat', 'repeat option should be no-repeat');
};
imageObj.src = '../darth-vader.jpg';