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

setup support for pattern fills

Browse Source
This commit is contained in:
Eric Rowell 2012-05-12 18:18:06 -07:00
parent 92919058b2
commit 9e3475f37a
4 changed files with 93 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
dist/kinetic-core.js vendored
View File

@ -2536,33 +2536,40 @@ Kinetic.Shape.prototype = {
var context = this.getContext(); var context = this.getContext();
var fill = this.attrs.fill; var fill = this.attrs.fill;
if(!!fill) { if(!!fill) {
var s = fill.start;
var e = fill.end;
var f = null;
// color fill // color fill
if( typeof fill == 'string') { if( typeof fill == 'string') {
f = this.attrs.fill; f = this.attrs.fill;
} }
else { // pattern fill
var s = fill.start; else if(fill.image !== undefined) {
var e = fill.end; var o = Kinetic.GlobalObject._getPoint(fill.offset);
// linear gradient var repeat = fill.repeat === undefined ? 'repeat' : fill.repeat;
if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) { f = context.createPattern(fill.image, repeat);
var context = this.getContext(); }
var grd = context.createLinearGradient(s.x, s.y, e.x, e.y); // gradient fill
grd.addColorStop(0, s.color); else if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
grd.addColorStop(1, e.color); var context = this.getContext();
f = grd; var grd = context.createLinearGradient(s.x, s.y, e.x, e.y);
} grd.addColorStop(0, s.color);
// radial gradient grd.addColorStop(1, e.color);
else if(s.radius !== undefined && e.radius !== undefined) { f = grd;
var context = this.getContext(); }
var grd = context.createRadialGradient(s.x, s.y, s.radius, s.x, s.y, e.radius); // radial gradient
grd.addColorStop(0, s.color); else if(s.radius !== undefined && e.radius !== undefined) {
grd.addColorStop(1, e.color); var context = this.getContext();
f = grd; var grd = context.createRadialGradient(s.x, s.y, s.radius, s.x, s.y, e.radius);
} grd.addColorStop(0, s.color);
else { grd.addColorStop(1, e.color);
f = 'black'; f = grd;
} }
else {
f = 'black';
} }
context.fillStyle = f; context.fillStyle = f;

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

File diff suppressed because one or more lines are too long

51
src/Shape.js
View File

@ -109,33 +109,40 @@ Kinetic.Shape.prototype = {
var context = this.getContext(); var context = this.getContext();
var fill = this.attrs.fill; var fill = this.attrs.fill;
if(!!fill) { if(!!fill) {
var s = fill.start;
var e = fill.end;
var f = null;
// color fill // color fill
if( typeof fill == 'string') { if( typeof fill == 'string') {
f = this.attrs.fill; f = this.attrs.fill;
} }
else { // pattern fill
var s = fill.start; else if(fill.image !== undefined) {
var e = fill.end; var o = Kinetic.GlobalObject._getPoint(fill.offset);
// linear gradient var repeat = fill.repeat === undefined ? 'repeat' : fill.repeat;
if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) { f = context.createPattern(fill.image, repeat);
var context = this.getContext(); }
var grd = context.createLinearGradient(s.x, s.y, e.x, e.y); // gradient fill
grd.addColorStop(0, s.color); else if(s.x !== undefined && s.y !== undefined && e.x !== undefined && e.y !== undefined) {
grd.addColorStop(1, e.color); var context = this.getContext();
f = grd; var grd = context.createLinearGradient(s.x, s.y, e.x, e.y);
} grd.addColorStop(0, s.color);
// radial gradient grd.addColorStop(1, e.color);
else if(s.radius !== undefined && e.radius !== undefined) { f = grd;
var context = this.getContext(); }
var grd = context.createRadialGradient(s.x, s.y, s.radius, s.x, s.y, e.radius); // radial gradient
grd.addColorStop(0, s.color); else if(s.radius !== undefined && e.radius !== undefined) {
grd.addColorStop(1, e.color); var context = this.getContext();
f = grd; var grd = context.createRadialGradient(s.x, s.y, s.radius, s.x, s.y, e.radius);
} grd.addColorStop(0, s.color);
else { grd.addColorStop(1, e.color);
f = 'black'; f = grd;
} }
else {
f = 'black';
} }
context.fillStyle = f; context.fillStyle = f;

33
tests/js/unitTests.js
View File

@ -75,6 +75,39 @@ Test.prototype.tests = {
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
},
'STAGE - add shape with pattern 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 group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: {
image: imageObj,
repeat: 'repeat',
offset: [20, 20]
},
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
};
imageObj.src = '../darth-vader.jpg';
}, },
'STAGE - add shape with radial gradient fill': function(containerId) { 'STAGE - add shape with radial gradient fill': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({