首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >连接:如何将图标包含到rappid的自定义形状中

连接:如何将图标包含到rappid的自定义形状中
EN

Stack Overflow用户
提问于 2021-02-24 14:16:56
回答 1查看 161关注 0票数 0

我正在使用Rappid框架作为HTMLDiagraming工具。我使用dia.Element从rappid的命名空间中使用下面的示例创建了自定义形状。无论如何,使用SVG可以很好地处理图像,但是我想使用icomoon/font-awesome图标。

代码语言:javascript
运行
复制
export const Element = dia.Element.define(
    "custom.Element",
    {
        size: {height: 165, width: 140},
        attrs: {
            body: {
                refWidth: "100%",
                refHeight: "100%",
                fill: "transparent",
            },
            logoWrapper: {
                refX2: 25,
                refY2: 40,
            },
            logoContainer: {
                height: 75,
                width: 90,
                fill: "#fff",
                stroke: "#9C9C9C",
                rx: 6,
                ry: 6,
            },
            appLogo: {
                width: 48,
                height: 48,
                refX: 21,
                refY: 14,
                fontFamily: "icomoon",
                content: `\eb65`,
                text: `\eb65`,
            },
            ...otherProps,
        } as Record<string, SVGAttributes>,
    },
    {
        markup: [
            {
                tagName: "rect",
                selector: "body",
            },
            {
                tagName: "g",
                selector: "logoWrapper",
                children: [
                    {
                        tagName: "rect",
                        selector: "logoContainer",
                    },
                    {
                        tagName: "text",
                        selector: "appLogo",
                    },
                    ...otherMarkup,
                ],
            },
        ] as dia.MarkupJSON,
    }
);

在这里,我在appLogo上使用了自定义元素上的appLogo:

代码语言:javascript
运行
复制
appLogo: {
  width: 48,
  height: 48,
  refX: 21,
  refY: 14,
  // here I've used the font-family or content/text
  // to fiddle with it, but no luck
  fontFamily: "icomoon",
  content: `\eb65`,
  text: `\eb65`,
}

标记是这样的:

代码语言:javascript
运行
复制
{
  tagName: "text",
  selector: "appLogo",
},

任何帮助都将不胜感激。谢谢。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-25 09:02:05

我终于用正确的字体代码解决了这个问题。需要将\u附加到text字符串。而且不再需要content道具。

代码语言:javascript
运行
复制
{
  text: '\ueb65'
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66352679

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档