mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Fix gradients applied to text.
Two things: 1. Apply a gradientTransform for text items that reverse the text transform. This is required because we do not use x/y for text, and gradients are impacted by the transforms. 2. Always apply the style to text elements instead of allowing them to be applied to the parent group if the text element is alone. This is so the fill property is always on the text element so the gradient transforms work.
This commit is contained in:
parent
51a1b93df6
commit
7519590321
1 changed files with 12 additions and 2 deletions
|
@ -194,7 +194,7 @@ new function() {
|
|||
return SvgElement.create('use', attrs, formatter);
|
||||
}
|
||||
|
||||
function exportGradient(color) {
|
||||
function exportGradient(color, item) {
|
||||
// NOTE: As long as the fillTransform attribute is not implemented,
|
||||
// we need to create a separate gradient object for each gradient,
|
||||
// even when they share the same gradient definition.
|
||||
|
@ -226,6 +226,13 @@ new function() {
|
|||
y2: destination.y
|
||||
};
|
||||
}
|
||||
// Scratch-specific: apply inverse of item transform for text elements
|
||||
// because they use transform instead of x/y.
|
||||
if (item instanceof paper.PointText) {
|
||||
attrs.gradientTransform = getTransform(
|
||||
item._matrix.clone().invert(), false, formatter).transform;
|
||||
}
|
||||
|
||||
attrs.gradientUnits = 'userSpaceOnUse';
|
||||
gradientNode = SvgElement.create((radial ? 'radial' : 'linear')
|
||||
+ 'Gradient', attrs, formatter);
|
||||
|
@ -298,7 +305,10 @@ new function() {
|
|||
value = item[get]();
|
||||
if (entry.exportFilter
|
||||
? entry.exportFilter(item, value)
|
||||
: !parent || !Base.equals(parent[get](), value)) {
|
||||
: !parent || !Base.equals(parent[get](), value) ||
|
||||
// Scratch-specific: always apply styles to text elements to
|
||||
// because gradients must be specified to avoid transform problems.
|
||||
item instanceof paper.PointText) {
|
||||
if (type === 'color' && value != null) {
|
||||
// Support for css-style rgba() values is not in SVG 1.1, so
|
||||
// separate the alpha value of colors with alpha into the
|
||||
|
|
Loading…
Reference in a new issue