滴在纸上改变形状

Question

我正在使用 rappidjs 3.2，我正在尝试制作一个模具形状，当我将它放到纸上时它会改变形状。出于测试目的，我只想在控制台中打印形状类型 dragEndClone（据我从文档中了解到，这就是我需要使用的）。

模板：

var stencil = new joint.ui.Stencil({
   paper: paper,
   scaleClones: true,
   width: 240,
   groups: {
       myShapesGroup1: { index: 1, label: 'My Shapes' }
   },
   dropAnimation: true,
   groupsToggleButtons: true,
   search: {
       '*': ['type', 'attrs/label/text']
   },
   layout: true, // Use default Grid Layout
   dragEndClone: function (el) {
        console.log(el.get('type'));
   }
});
document.querySelector('.stencil-container').appendChild(stencil.el);

形状：

joint.dia.Element.define('standard.Rectangle', {
   attrs: {
       body: {
           refWidth: '100%',
           refHeight: '100%',
           strokeWidth: 0,
           stroke: '#000000',
           fill: {
               type: 'linearGradient',
               stops: [
                   { offset: '0%', color: '#FEB663' },
                   { offset: '100%', color: '#31D0C6' }
               ],
               // Top-to-bottom gradient.
               attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
           }
       },
       label: {
           textVerticalAnchor: 'middle',
           textAnchor: 'middle',
           rx: '1%',
           refX: '50%',
           refY: '50%',
           fontSize: 14,
           fill: '#333333',
           text: 'Siemans'
       }
   }
}, {
    markup: [{ tagName: 'rect', selector: 'body' }, { tagName: 'text', selector: 'label' }]
});

向模板添加形状：

stencil.render().load({ myShapesGroup1: [{ type: 'standard.Rectangle' }] });

之前显示的代码给我这个错误：

rappid.js:50779 Uncaught TypeError: Cannot read property 'getBBox' of undefined
    at child.drop (rappid.js:50779)
    at child.onDragEnd (rappid.js:50638)
    at HTMLDocument.dispatch (jquery.js:5429)
    at HTMLDocument.elemData.handle

Answer 1

dragEndClone 需要 return 一个元素。

dragEndClone: function (el) {
  console.log(el.get('type'));
  return el.clone();
}

滴在纸上改变形状

Changing shape at drop on paper

javascript

jointjs

rappid