Question

在模板中我们有png，在纸上我们用svg替换单元格[png]。

cell - 代表png vectorString - png的标记

        var currentSvg = new joint.shapes.basic.pwmeter({
            position: { x: bbox.x, y: bbox.y },
            size: { height: cell.attributes.minHeight, width: cell.attributes.minWidth },
            minWidth: cell.attributes.minWidth,
            minHeight: cell.attributes.minHeight,
            markup: vectorString,
            type: cell.attributes.type,
            fileName: cell.attributes.fileName,
            isInteractive: true,
            elementClassName: cell.attributes.elementClassName,
            isAnimatedDevice: cell.attributes.isAnimatedDevice,
            attrs: {
            '.myClass': {
                  fill: '#ffffff',
                stroke: '#000000'
                      }
               }
            });

    currentSvg.addTo(Rappid.graph);

我们通过扩展Image来制作pwmeter joint.shapes.basic.pwmeter = joint.shapes.basic.Image.extend（{ 键入：＆＃39; basic.pwmeter＆＃39;， initialize：function（）{ return joint.shapes.basic.Image.prototype.initialize.apply（this，arguments）; } }）;

我们将png从模板放到纸上，并获得相应png的svg标记，我们称之为currentSvg.addTo（Rappid.graph），在执行此过程中，米[svg]中的所有文本都被空格替换。

我们的文字 - 0

自动生成的代码替换了我的文字，我们无法弄清楚为什么会发生这种情况

-

以上是生成的文本我们是关于联合的新手，我们认为我们在扩展期间做错了什么。

Answer 1

我可以看到你的设置中有markup。确保有一个文字＆＃39;占位符＆＃39;在标记中。

在此示例中，attr text与<text/>元素

绑定在一起

new joint.shapes.basic.pwmeter({
    markup: '<g><image/><text/></g>',
    attrs: {
        text: { text: '48x48' },
        image: { 'xlink:href': 'http://placehold.it/48x48', width: 48, height: 48 }
    },
    size: { width : 50, height: 50 },
    position: { x:200, y: 50},
}).addTo(graph)

但是在这里，attr text在标记中没有匹配的元素，因此它不会被渲染。

new joint.shapes.basic.pwmeter({
    markup: '<g><image/></g>',
    attrs: {
       text: { text: '90x90' },
       image: { 'xlink:href': 'http://placehold.it/90x90', width: 90, height: 90 }
    },
    size: { width : 90, height: 90 },
    position: { x:50, y: 50},
}).addTo(graph)

有关attr属性的更多信息，请访问http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#joint.dia.Element.presentation

jointjs：svg文本在drop to paper上被空格替换

1 个答案: