javascript 如何在Raphael.js中为文本应用大纲

nx7onnlm 于 2022-10-30 发布在 Java

关注(0)|答案(3)|浏览(131)

我有一个定制足球球衣设计的网站。我正在使用Raphael.js定制，我需要知道我们如何在拉斐尔应用轮廓文本。
在搜索时，我得到了使用Raphael的stroke属性的建议。但这并没有给出轮廓效果。Stroke实际上是内联的。当我们增加stroke宽度时，文本的宽度会减小。
如何在不减少文本宽度的情况下为Raphael中的文本应用轮廓？
笔画前的文字：

笔画后的文字：

文本需要像这样应用笔划/轮廓（只是演示从photoshop）：

JavaScript

来源：https://stackoverflow.com/questions/30707893/how-to-apply-an-outline-for-a-text-in-raphael-js

3条答案

按热度按时间

1u4esq0p1#

试试这个。

text.attr({ 
        "font-size": 100, 
        "font-family": "Arial, Helvetica, sans-serif",
        "stroke":"red",
        "stroke-width":"5px",
        "stroke-linecap": "square",
        "stroke-linejoin": "bevel"});

赞(0）回复(0）举报 2022-10-30

6ss1mwsb2#

paint-order属性指定给定形状或文本元素的填充、描边和标记的绘制顺序。
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order
你想要的是

var paper = Raphael("playarea", 500, 500); 
var text = paper.text(200, 100, "RAPHAEL!!"); 
text.attr({ "font-size": 100, "font-family": "Arial, Helvetica, sans-serif", "stroke":"red", "stroke-width":"5px", "paint-order":"stroke"});

丹，根据你举的例子
请注意IE不支持

赞(0）回复(0）举报 2022-10-30

anhgbhbe3#

我遇到了这个问题。一个简单的解决方法是在同一个位置添加两次文本。首先，以所需的描边颜色添加文本，然后添加描边。然后，以所需的填充颜色再次添加文本，但不添加描边。调整第一个文本元素的描边宽度，直到达到所需的效果。

赞(0）回复(0）举报 2022-10-30