[]SVG渐变精灵的扩展脚本继承了多个精灵, 在safari环境下重叠了渲染
你好
小弟写了一个把用SVG制作成渐变字体, 然后以loadImage()的方式加载到精灵, 再以扩展脚本的方式加到IDE上的精灵上,
例如画面上有3个精灵分别显示了: "Hello", "World", "Hello World"的渐变文字,
在Safari环境下却变成"Hello" , "Hello"+"World"(重疊), "Hello"+"World"+"Hello World"(重疊), 如附图, 在Chrome或Opera环境下是没有重叠的问题, 小弟想不到解决的方向, 求大大指点, 感激
附上渐变SVG文字的代码:
/**
* this class is a extension of texts with gradient color
*/
var effect;
(function (effect) {
var GradientText = (function (_super) {
const style = {
DEFAULT: "default",
VERTICAL: "vertical",
HORIZONTAL: "horizontal",
TOP_LEFT: "topLeft",
TOP_RIGHT: "topRight",
};
// gradient direction
const VERTICAL_GRADIENT = 'x1="0" x2="1" y1="0" y2="0"';
const HORIZONTAL_GRADIENT = 'x1="0" x2="0" y1="0" y2="1"';
const TOP_RIGHT_GRADIENT = 'x1="1" x2="0" y1="0" y2="1"';
const DEFAULT_GRADIENT = 'x1="0" x2="1" y1="0" y2="1"';
const DEFAULT_COLOR_1 = "%23fff4dc";
const DEFAULT_COLOR_2 = "%23e4cea3";
let gradientStyle = "";
function GradientText() {
GradientText.super(this);
//自定义的脚本会有时序问题,所以在此添加一个延时
this.frameOnce(2, this, this.init);
}
Laya.class(GradientText, "effect.GradientText", _super);
let _proto = GradientText.prototype;
_proto.init = function () {
switch (this.style) {
case style.VERTICAL:
gradientStyle = VERTICAL_GRADIENT + '>';
break;
case style.HORIZONTAL:
gradientStyle = HORIZONTAL_GRADIENT + '>';
break;
case style.TOP_RIGHT:
gradientStyle = TOP_RIGHT_GRADIENT + '>';
break;
default:
gradientStyle = DEFAULT_GRADIENT + '>';
break;
}
if (this.style === style.DEFAULT) {
this.color1Size = 20;
this.color1 = DEFAULT_COLOR_1;
this.color2Size = 40;
this.color2 = DEFAULT_COLOR_2;
this.color3Size = 60;
this.color3 = DEFAULT_COLOR_1;
this.color4Size = 80;
this.color4 = DEFAULT_COLOR_2;
this.color5Size = 100;
this.color5 = DEFAULT_COLOR_1;
}
this.setGradientText();
};
_proto.getLangId = function () {
return this.langId;
}
_proto.setGradientText = function () {
this.graphics.clear();
let data = '';
data += 'data:image/svg+xml,' + '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" ';
data += 'viewBox="0 0 ' + this.width + ' ' + this.height + '" ';
// set svg width and height
data += 'width="' + this.width + '" height="' + this.height + '">';
data += '<defs>';
// set gradient
data += '<linearGradient id="Gradient" ' + gradientStyle;
data += '<stop offset="' + this.color1Size + '%" stop-color="' + this.color1 + '"/>';
data += '<stop offset="' + this.color2Size + '%" stop-color="' + this.color2 + '"/>';
data += '<stop offset="' + this.color3Size + '%" stop-color="' + this.color3 + '"/>';
data += '<stop offset="' + this.color4Size + '%" stop-color="' + this.color4 + '"/>';
data += '<stop offset="' + this.color5Size + '%" stop-color="' + this.color5 + '"/>';
data += '</linearGradient>';
// End of set gradient
// set shadow
data += '<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">';
data += '<feGaussianBlur stdDeviation="2 2" result="shadow"/>';
data += '<feOffset dx="6" dy="6"/>'
data += '</filter>'
// End of set shadow
data += '</defs>';
if (this.isShadow) {
// alignment
data += this.getTextAlignment();
data += 'font-size="' + this.fontSize;
data += '" filter= "url(%23shadow)" fill="black"'
data += " font-family='" + '"微軟正黑體",arial,sans-serif' + "'";
data += '>';
data += this.text + '</text> ';
}
// alignment
data += this.getTextAlignment();
data += 'font-size="' + this.fontSize;
if (this.isGradient)
data += '" fill="url(%23Gradient)"';
else
data += '" fill="white"';
data += " font-family='" + '"微軟正黑體",arial,sans-serif' + "'";
data += '>';
data += this.text + '</text> ';
data += '</svg>';
this.loadImage(data, 0, 0, this.width, this.height);
};
_proto.getTextAlignment = function () {
let alignmentText = "";
let isFF = Laya.Browser.onFirefox;
switch (this.textAlignment) {
case "left":
console.log(this.text + " left");
if (isFF) {
alignmentText = '<text text-anchor="start" dominant-baseline="middle" ';
} else {
alignmentText = '<text text-anchor="start" alignment-baseline="middle" ';
}
alignmentText += 'x="' + 0 + '" y="' + this.height / 2 + '" ';
break;
case "right":
if (isFF) {
alignmentText = '<text text-anchor="end" dominant-baseline="middle" ';
} else {
alignmentText = '<text text-anchor="end" alignment-baseline="middle" ';
}
alignmentText += 'x="' + this.width + '" y="' + this.height / 2 + '" ';
break;
default:
if (isFF) {
alignmentText = '<text text-anchor="middle" dominant-baseline="middle" ';
} else {
alignmentText = '<text text-anchor="middle" alignment-baseline="middle" ';
}
alignmentText += 'x="' + this.width / 2 + '" y="' + this.height / 2 + '" ';
break;
};
return alignmentText;
};
return GradientText;
}(Laya.Sprite));
effect.GradientText = GradientText;
})(effect || (effect = {}));
小弟写了一个把用SVG制作成渐变字体, 然后以loadImage()的方式加载到精灵, 再以扩展脚本的方式加到IDE上的精灵上,
例如画面上有3个精灵分别显示了: "Hello", "World", "Hello World"的渐变文字,
在Safari环境下却变成"Hello" , "Hello"+"World"(重疊), "Hello"+"World"+"Hello World"(重疊), 如附图, 在Chrome或Opera环境下是没有重叠的问题, 小弟想不到解决的方向, 求大大指点, 感激
附上渐变SVG文字的代码:
/**
* this class is a extension of texts with gradient color
*/
var effect;
(function (effect) {
var GradientText = (function (_super) {
const style = {
DEFAULT: "default",
VERTICAL: "vertical",
HORIZONTAL: "horizontal",
TOP_LEFT: "topLeft",
TOP_RIGHT: "topRight",
};
// gradient direction
const VERTICAL_GRADIENT = 'x1="0" x2="1" y1="0" y2="0"';
const HORIZONTAL_GRADIENT = 'x1="0" x2="0" y1="0" y2="1"';
const TOP_RIGHT_GRADIENT = 'x1="1" x2="0" y1="0" y2="1"';
const DEFAULT_GRADIENT = 'x1="0" x2="1" y1="0" y2="1"';
const DEFAULT_COLOR_1 = "%23fff4dc";
const DEFAULT_COLOR_2 = "%23e4cea3";
let gradientStyle = "";
function GradientText() {
GradientText.super(this);
//自定义的脚本会有时序问题,所以在此添加一个延时
this.frameOnce(2, this, this.init);
}
Laya.class(GradientText, "effect.GradientText", _super);
let _proto = GradientText.prototype;
_proto.init = function () {
switch (this.style) {
case style.VERTICAL:
gradientStyle = VERTICAL_GRADIENT + '>';
break;
case style.HORIZONTAL:
gradientStyle = HORIZONTAL_GRADIENT + '>';
break;
case style.TOP_RIGHT:
gradientStyle = TOP_RIGHT_GRADIENT + '>';
break;
default:
gradientStyle = DEFAULT_GRADIENT + '>';
break;
}
if (this.style === style.DEFAULT) {
this.color1Size = 20;
this.color1 = DEFAULT_COLOR_1;
this.color2Size = 40;
this.color2 = DEFAULT_COLOR_2;
this.color3Size = 60;
this.color3 = DEFAULT_COLOR_1;
this.color4Size = 80;
this.color4 = DEFAULT_COLOR_2;
this.color5Size = 100;
this.color5 = DEFAULT_COLOR_1;
}
this.setGradientText();
};
_proto.getLangId = function () {
return this.langId;
}
_proto.setGradientText = function () {
this.graphics.clear();
let data = '';
data += 'data:image/svg+xml,' + '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" ';
data += 'viewBox="0 0 ' + this.width + ' ' + this.height + '" ';
// set svg width and height
data += 'width="' + this.width + '" height="' + this.height + '">';
data += '<defs>';
// set gradient
data += '<linearGradient id="Gradient" ' + gradientStyle;
data += '<stop offset="' + this.color1Size + '%" stop-color="' + this.color1 + '"/>';
data += '<stop offset="' + this.color2Size + '%" stop-color="' + this.color2 + '"/>';
data += '<stop offset="' + this.color3Size + '%" stop-color="' + this.color3 + '"/>';
data += '<stop offset="' + this.color4Size + '%" stop-color="' + this.color4 + '"/>';
data += '<stop offset="' + this.color5Size + '%" stop-color="' + this.color5 + '"/>';
data += '</linearGradient>';
// End of set gradient
// set shadow
data += '<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">';
data += '<feGaussianBlur stdDeviation="2 2" result="shadow"/>';
data += '<feOffset dx="6" dy="6"/>'
data += '</filter>'
// End of set shadow
data += '</defs>';
if (this.isShadow) {
// alignment
data += this.getTextAlignment();
data += 'font-size="' + this.fontSize;
data += '" filter= "url(%23shadow)" fill="black"'
data += " font-family='" + '"微軟正黑體",arial,sans-serif' + "'";
data += '>';
data += this.text + '</text> ';
}
// alignment
data += this.getTextAlignment();
data += 'font-size="' + this.fontSize;
if (this.isGradient)
data += '" fill="url(%23Gradient)"';
else
data += '" fill="white"';
data += " font-family='" + '"微軟正黑體",arial,sans-serif' + "'";
data += '>';
data += this.text + '</text> ';
data += '</svg>';
this.loadImage(data, 0, 0, this.width, this.height);
};
_proto.getTextAlignment = function () {
let alignmentText = "";
let isFF = Laya.Browser.onFirefox;
switch (this.textAlignment) {
case "left":
console.log(this.text + " left");
if (isFF) {
alignmentText = '<text text-anchor="start" dominant-baseline="middle" ';
} else {
alignmentText = '<text text-anchor="start" alignment-baseline="middle" ';
}
alignmentText += 'x="' + 0 + '" y="' + this.height / 2 + '" ';
break;
case "right":
if (isFF) {
alignmentText = '<text text-anchor="end" dominant-baseline="middle" ';
} else {
alignmentText = '<text text-anchor="end" alignment-baseline="middle" ';
}
alignmentText += 'x="' + this.width + '" y="' + this.height / 2 + '" ';
break;
default:
if (isFF) {
alignmentText = '<text text-anchor="middle" dominant-baseline="middle" ';
} else {
alignmentText = '<text text-anchor="middle" alignment-baseline="middle" ';
}
alignmentText += 'x="' + this.width / 2 + '" y="' + this.height / 2 + '" ';
break;
};
return alignmentText;
};
return GradientText;
}(Laya.Sprite));
effect.GradientText = GradientText;
})(effect || (effect = {}));
要回复问题请先登录
1 个回复
Star
赞同来自: