Skip to content

Commit

Permalink
Fillforimages (#3269)
Browse files Browse the repository at this point in the history
* fixed selection, added test (#3254)

* allow for deep state check and save (#3262)

* added fill for images

* added fill for images

* added fill for images

* fix tests
  • Loading branch information
asturur authored Sep 17, 2016
1 parent e9d8039 commit e36faef
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 20 deletions.
60 changes: 42 additions & 18 deletions src/shapes/image.class.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,13 @@
*/
meetOrSlice: 'meet',

/**
* Color of image fill
* @type String
* @default
*/
fill: '',

/**
* Width of a stroke.
* For image quality a stroke multiple of 2 gives better results.
Expand Down Expand Up @@ -202,7 +209,7 @@
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_stroke: function(ctx) {
if (!this.stroke || this.strokeWidth === 0) {
if ((!this.stroke || this.strokeWidth === 0) && !this.fill) {
return;
}
var w = this.width / 2, h = this.height / 2;
Expand Down Expand Up @@ -296,21 +303,33 @@
if (this.alignX !== 'none' && this.alignY !== 'none') {
preserveAspectRatio = 'x' + this.alignX + 'Y' + this.alignY + ' ' + this.meetOrSlice;
}
markup.push(
'<g transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '">\n',
'<image ', this.getSvgId(), 'xlink:href="', this.getSvgSrc(),
'" x="', x, '" y="', y,
markup.push('<g transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '">\n');
if (this.fill) {
var origStroke = this.stroke;
var origShadow = this.shadow;
this.stroke = null;
markup.push(
'<rect ',
'x="', x, '" y="', y,
'" width="', this.width, '" height="', this.height,
'" style="', this.getSvgStyles(),
// we're essentially moving origin of transformation from top/left corner to the center of the shape
// by wrapping it in container <g> element with actual transformation, then offsetting object to the top/left
// so that object's center aligns with container's left/top
'" width="', this.width,
'" height="', this.height,
'" preserveAspectRatio="', preserveAspectRatio, '"',
'></image>\n'
'"/>\n'
);
this.shadow = null;
}
markup.push(
'<image ', this.getSvgId(), 'xlink:href="', this.getSvgSrc(),
'" x="', x, '" y="', y,
'" style="', this.getSvgStyles(),
// we're essentially moving origin of transformation from top/left corner to the center of the shape
// by wrapping it in container <g> element with actual transformation, then offsetting object to the top/left
// so that object's center aligns with container's left/top
'" width="', this.width,
'" height="', this.height,
'" preserveAspectRatio="', preserveAspectRatio, '"',
'></image>\n'
);

if (this.stroke || this.strokeDashArray) {
if (this.stroke) {
var origFill = this.fill;
this.fill = null;
markup.push(
Expand All @@ -320,11 +339,11 @@
'" style="', this.getSvgStyles(),
'"/>\n'
);
this.fill = origFill;
}

markup.push('</g>\n');

origFill && (this.fill = origFill);
origStroke && (this.stroke = origStroke);
origShadow && (this.shadow = origShadow);
return reviver ? reviver(markup.join('')) : markup.join('');
},
/* _TO_SVG_END_ */
Expand Down Expand Up @@ -472,14 +491,19 @@
else {
elementToDraw = this._element;
}
this._stroke(ctx);
this._renderFill(ctx);
if (this.fill) {
// if renderedFill remove shadow for image
this._removeShadow(ctx);
}
elementToDraw && ctx.drawImage(elementToDraw,
x + imageMargins.marginX,
y + imageMargins.marginY,
imageMargins.width,
imageMargins.height
);

this._stroke(ctx);
this._renderStroke(ctx);
},

Expand Down
2 changes: 1 addition & 1 deletion test/unit/canvas_static.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
'top': 0,
'width': IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects
'height': IMG_HEIGHT, // or does it now?
'fill': 'rgb(0,0,0)',
'fill': '',
'stroke': null,
'strokeWidth': 0,
'strokeDashArray': null,
Expand Down
2 changes: 1 addition & 1 deletion test/unit/image.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
'top': 0,
'width': IMG_WIDTH, // node-canvas doesn't seem to allow setting width/height on image objects
'height': IMG_HEIGHT, // or does it now?
'fill': 'rgb(0,0,0)',
'fill': '',
'stroke': null,
'strokeWidth': 0,
'strokeDashArray': null,
Expand Down

0 comments on commit e36faef

Please sign in to comment.