Question

new express()

我正在尝试使用基本属性更改元素的宽度和高度，但在结果元素中始终自动缩放，看起来大小是按比例构建而不是使用实际px宽度。

{
            type: 'basic.Image',
            size: { width: 53, height: 42 },
            attrs: {
                '.': {
                    'data-tooltip': 'Image',
                    'data-tooltip-position': 'left',
                    'data-tooltip-position-selector': '.joint-stencil'
                },
                image: {
                    width: 53,
                    height: 42,
                    'xlink:href': 'assets/image-icon1.svg'
                },
                text: {
                    text: 'image',
                    'font-family': 'Roboto Condensed',
                    'font-weight': 'Normal',
                    'font-size': 9,
                    display: '',
                    stroke: '#000',
                    'stroke-width': 0,
                    'fill': '#222138'
                }
            }
        }

这个html我在检查中看到了。这个可伸缩的g会影响所有内容并忽略我的宽度/高度属性。有人能告诉我如何在没有这种自动缩放处理的情况下更改关节js中元素的尺寸吗？

Answer 1

在url下方，您可以获得帮助。

https://resources.jointjs.com/docs/rappid/v2.4/ui.html#ui.Stencil

创建模具对象时，进行布局：false，然后为模具创建组

    App.config.stencil.groups = {
        group1: { index: 1, label: 'Standard shapes'},
    };

完成此操作后，如下所示动态创建rect对象

    var rect = new joint.shapes.standard.Rectangle();
    rect.position(5, 5);
    rect.resize(230, 40);
    rect.attr({
    body: {
        fill: 'transparent',
        stroke: '#31d0c6',
        strokeWidth: 2,
    },
    label: {
          text: 'Hello',
        fill: '#31d0c6',
       }
    });

完成后，将该对象添加到模具组中。

    App.config.stencil.shapes.group1.push(rect);

之后，将组添加到模具中。在结果上，您将看到rect具有先前指定的正确宽度和高度。

Joint.js元素缩放

1 个答案: