私は HTML 作図ツールにRappidフレームワークを使用しています。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,
}
);
ここではattr
、appLogo で on カスタム要素を使用しました。
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",
},
どんな助けでも大歓迎です。ありがとう。