Question

标题说明了一切。在JointJs中，我尝试突出显示自定义形状的轮廓。现在，如果单击该形状，它将在其BBox周围得到一个橙色矩形。我尝试在轮廓（周长）周围产生相同的效果。

也许我不应该粘贴整个代码段，现在stackoverflow不允许我发布它，因为它主要是代码。我不知道该问题还需要我解释什么，但我一直在键入:)

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 600,
  gridSize: 20,
  model: graph
});

joint.shapes.custom = {};
joint.shapes.custom.Element = joint.dia.Element.define('custom.Element', {
	attrs: {
  	body: {
    	rx: 5,
        ry: 5,
      width: 50,
      height:50,
      fill: '#333'
    },
    info: {
    	ref: 'body',
      refX: -20,
      refY: -20,
      refHeight: '100%',
      refWidth: '100%',
      fill: '#c4c4c4'
    }
  }
}, {
  markup: [{
  	selector: 'body',
    tagName: 'rect'
  }, {
  	selector: 'info',
    tagName: 'rect'  
  }]
});


let heighlighted = false
  var customElement = new joint.shapes.custom.Element();
  customElement
    .resize(100, 100)
    .position(50, 100)
    .addTo(graph);

    paper.on('element:pointerclick', elementView => {
      if (heighlighted === false) {
        elementView.highlight()
        heighlighted = true
      } else {
        elementView.unhighlight()
        heighlighted = false
      }
      
    })

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.js"></script>
    <div id="paper"></div>
</body>
</html>

JointJs突出显示自定义元素的轮廓

0 个答案: