mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-18 05:00:58 +00:00
Fix gradient fill on fabric.Text objects. Fix #278.
This commit is contained in:
kangax
parent
f0fb459b23
commit
57d7861fc4
4 changed files with 86 additions and 43 deletions
123
dist/all.js
vendored
123
dist/all.js
vendored
|
|
@ -13624,88 +13624,93 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
|
|||
* @property
|
||||
* @type Number
|
||||
*/
|
||||
fontSize: 40,
|
||||
fontSize: 40,
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type Number
|
||||
*/
|
||||
fontWeight: 400,
|
||||
fontWeight: 400,
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type String
|
||||
*/
|
||||
fontFamily: 'Times New Roman',
|
||||
fontFamily: 'Times New Roman',
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type String
|
||||
*/
|
||||
textDecoration: '',
|
||||
textDecoration: '',
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type String | null
|
||||
*/
|
||||
textShadow: '',
|
||||
textShadow: '',
|
||||
|
||||
/**
|
||||
* Determines text alignment. Possible values: "left", "center", or "right".
|
||||
* @property
|
||||
* @type String
|
||||
*/
|
||||
textAlign: 'left',
|
||||
textAlign: 'left',
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type String
|
||||
*/
|
||||
fontStyle: '',
|
||||
fontStyle: '',
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type Number
|
||||
*/
|
||||
lineHeight: 1.3,
|
||||
lineHeight: 1.3,
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type String
|
||||
*/
|
||||
strokeStyle: '',
|
||||
strokeStyle: '',
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type Number
|
||||
*/
|
||||
strokeWidth: 1,
|
||||
strokeWidth: 1,
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type String
|
||||
*/
|
||||
backgroundColor: '',
|
||||
backgroundColor: '',
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type String
|
||||
*/
|
||||
textBackgroundColor: '',
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type String | null
|
||||
*/
|
||||
path: null,
|
||||
path: null,
|
||||
|
||||
/**
|
||||
* @property
|
||||
* @type String
|
||||
*/
|
||||
type: 'text',
|
||||
type: 'text',
|
||||
|
||||
/**
|
||||
* Indicates whether canvas native text methods should be used to render text (otherwise, Cufon is used)
|
||||
* @property
|
||||
* @type Boolean
|
||||
*/
|
||||
useNative: true,
|
||||
useNative: true,
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
|
|
@ -13761,6 +13766,7 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
|
|||
'strokeStyle',
|
||||
'strokeWidth',
|
||||
'backgroundColor',
|
||||
'textBackgroundColor',
|
||||
'useNative'
|
||||
);
|
||||
fabric.util.removeFromArray(this.stateProperties, 'width');
|
||||
|
|
@ -13891,7 +13897,7 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
|
|||
var lineLeftOffset = this._getLineLeftOffset(lineWidth);
|
||||
|
||||
this._boundaries.push({
|
||||
height: this.fontSize,
|
||||
height: this.fontSize * this.lineHeight,
|
||||
width: lineWidth,
|
||||
left: lineLeftOffset
|
||||
});
|
||||
|
|
@ -13903,7 +13909,9 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
|
|||
* @method _setTextStyles
|
||||
*/
|
||||
_setTextStyles: function(ctx) {
|
||||
ctx.fillStyle = this.fill;
|
||||
ctx.fillStyle = this.fill.toLiveGradient
|
||||
? this.fill.toLiveGradient(ctx)
|
||||
: this.fill;
|
||||
ctx.strokeStyle = this.strokeStyle;
|
||||
ctx.lineWidth = this.strokeWidth;
|
||||
ctx.textBaseline = 'alphabetic';
|
||||
|
|
@ -14007,17 +14015,33 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
|
|||
ctx.save();
|
||||
ctx.fillStyle = this.backgroundColor;
|
||||
|
||||
ctx.fillRect(
|
||||
(-this.width / 2),
|
||||
(-this.height / 2),
|
||||
this.width,
|
||||
this.height
|
||||
);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
if (this.textBackgroundColor) {
|
||||
ctx.save();
|
||||
ctx.fillStyle = this.textBackgroundColor;
|
||||
|
||||
for (var i = 0, len = textLines.length; i < len; i++) {
|
||||
|
||||
var lineWidth = ctx.measureText(textLines[i]).width;
|
||||
var lineLeftOffset = this._getLineLeftOffset(lineWidth);
|
||||
if (textLines[i] !== '') {
|
||||
var lineWidth = ctx.measureText(textLines[i]).width;
|
||||
var lineLeftOffset = this._getLineLeftOffset(lineWidth);
|
||||
|
||||
ctx.fillRect(
|
||||
(-this.width / 2) + lineLeftOffset,
|
||||
(-this.height / 2) + (i * this.fontSize * this.lineHeight),
|
||||
lineWidth,
|
||||
this.fontSize
|
||||
);
|
||||
ctx.fillRect(
|
||||
(-this.width / 2) + lineLeftOffset,
|
||||
(-this.height / 2) + (i * this.fontSize * this.lineHeight),
|
||||
lineWidth,
|
||||
this.fontSize * this.lineHeight
|
||||
);
|
||||
}
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
|
@ -14135,20 +14159,21 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
|
|||
*/
|
||||
toObject: function(propertiesToInclude) {
|
||||
return extend(this.callSuper('toObject', propertiesToInclude), {
|
||||
text: this.text,
|
||||
fontSize: this.fontSize,
|
||||
fontWeight: this.fontWeight,
|
||||
fontFamily: this.fontFamily,
|
||||
fontStyle: this.fontStyle,
|
||||
lineHeight: this.lineHeight,
|
||||
textDecoration: this.textDecoration,
|
||||
textShadow: this.textShadow,
|
||||
textAlign: this.textAlign,
|
||||
path: this.path,
|
||||
strokeStyle: this.strokeStyle,
|
||||
strokeWidth: this.strokeWidth,
|
||||
backgroundColor: this.backgroundColor,
|
||||
useNative: this.useNative
|
||||
text: this.text,
|
||||
fontSize: this.fontSize,
|
||||
fontWeight: this.fontWeight,
|
||||
fontFamily: this.fontFamily,
|
||||
fontStyle: this.fontStyle,
|
||||
lineHeight: this.lineHeight,
|
||||
textDecoration: this.textDecoration,
|
||||
textShadow: this.textShadow,
|
||||
textAlign: this.textAlign,
|
||||
path: this.path,
|
||||
strokeStyle: this.strokeStyle,
|
||||
strokeWidth: this.strokeWidth,
|
||||
backgroundColor: this.backgroundColor,
|
||||
textBackgroundColor: this.textBackgroundColor,
|
||||
useNative: this.useNative
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -14230,7 +14255,23 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
|
|||
_getSVGTextAndBg: function(lineTopOffset, textLeftOffset, textLines) {
|
||||
var textSpans = [ ], textBgRects = [ ], i, lineLeftOffset, len, lineTopOffsetMultiplier = 1;
|
||||
|
||||
// text and background
|
||||
// bounding-box background
|
||||
if (this.backgroundColor && this._boundaries) {
|
||||
textBgRects.push(
|
||||
'<rect ',
|
||||
this._getFillAttributes(this.backgroundColor),
|
||||
' x="',
|
||||
toFixed(-this.width / 2, 2),
|
||||
'" y="',
|
||||
toFixed(-this.height / 2, 2),
|
||||
'" width="',
|
||||
toFixed(this.width, 2),
|
||||
'" height="',
|
||||
toFixed(this.height, 2),
|
||||
'"></rect>');
|
||||
}
|
||||
|
||||
// text and text-background
|
||||
for (i = 0, len = textLines.length; i < len; i++) {
|
||||
if (textLines[i] !== '') {
|
||||
lineLeftOffset = (this._boundaries && this._boundaries[i]) ? toFixed(this._boundaries[i].left, 2) : 0;
|
||||
|
|
@ -14251,11 +14292,11 @@ fabric.Image.filters.Pixelate.fromObject = function(object) {
|
|||
lineTopOffsetMultiplier++;
|
||||
}
|
||||
|
||||
if (!this.backgroundColor || !this._boundaries) continue;
|
||||
if (!this.textBackgroundColor || !this._boundaries) continue;
|
||||
|
||||
textBgRects.push(
|
||||
'<rect ',
|
||||
this._getFillAttributes(this.backgroundColor),
|
||||
this._getFillAttributes(this.textBackgroundColor),
|
||||
' x="',
|
||||
toFixed(textLeftOffset + this._boundaries[i].left, 2),
|
||||
'" y="',
|
||||
|
|
|
|||
2
dist/all.min.js
vendored
2
dist/all.min.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/all.min.js.gz
vendored
BIN
dist/all.min.js.gz
vendored
Binary file not shown.
|
|
@ -307,7 +307,9 @@
|
|||
* @method _setTextStyles
|
||||
*/
|
||||
_setTextStyles: function(ctx) {
|
||||
ctx.fillStyle = this.fill;
|
||||
ctx.fillStyle = this.fill.toLiveGradient
|
||||
? this.fill.toLiveGradient(ctx)
|
||||
: this.fill;
|
||||
ctx.strokeStyle = this.strokeStyle;
|
||||
ctx.lineWidth = this.strokeWidth;
|
||||
ctx.textBaseline = 'alphabetic';
|
||||
|
|
|
|||
Loading…
Reference in a new issue