2 
{
            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'
                }
            }
        }

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

  <g id="j_5" model-id="7035b15a-67f6-4531-a437-2c3f12d27c35"
   class="joint-theme-modern joint-cell joint-type-basic joint-type-basic-image joint-element" data-type="basic.Image"
   fill="#ffffff" stroke="none" data-tooltip="Image" data-tooltip-position="left"
   data-tooltip-position-selector=".joint-stencil" transform="translate(20,174.33962264150944)">
  <g class="rotatable" id="v-71">
    <g class="scalable" transform="scale(1.6981132075471699,1.6981132075471697)">
      <image id="v-73" width="53" height="42" xmlns:xlink="http://www.w3.org/1999/xlink"
             xlink:href="assets/image-icon1.svg"></image>
    </g>
    <text id="v-72" font-size="9" y="0.8em" xml:space="preserve" text-anchor="middle" fill="#222138" font-family="Roboto Condensed" font-weight="Normal" display="" stroke="#000" stroke-width="0" transform="matrix(1,0,0,1,45,91.3)"><tspan id="v-74" class="v-line" dy="0em" x="0">image</tspan></text>
  </g>
</g>

我在检查时看到的这个 html。这个可扩展的 g 影响着一切，忽略了我的宽度/高度属性。有人可以告诉我如何在没有这种自动缩放处理的情况下更改联合 js 中元素的尺寸吗？

4

1 回答 1

0

在下面的网址上，您可以获得帮助。

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

当您创建模板对象时，请布局：false 然后为模板创建组

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

一旦完成，然后动态创建矩形对象，如下所示

    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 具有您之前指定的正确宽度和高度。

于 2018-12-15T06:34:32.603 回答