我正在使用Rappid框架作为HTMLDiagraming工具。我使用dia.Element
从rappid的命名空间中使用下面的示例创建了自定义形状。无论如何,使用SVG可以很好地处理图像,但是我想使用icomoon/font-awesome图标。
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:
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`,
}
标记是这样的:
{
tagName: "text",
selector: "appLogo",
},
任何帮助都将不胜感激。谢谢。
发布于 2021-02-25 09:02:05
我终于用正确的字体代码解决了这个问题。需要将\u
附加到text
字符串。而且不再需要content
道具。
{
text: '\ueb65'
}
https://stackoverflow.com/questions/66352679
复制相似问题