自定义荧光笔

Question

我无法自定义默认荧光笔的样式。我试过使用这样的文档中的代码：

this.paper.on('element:pointerdown', function(elementView) {
  elementView.highlight({
    name: 'stroke',
    options: {
      padding: 10,
      rx: 5,
      ry: 5,
      attrs: {
        'stroke-width': 13,
        stroke: '#FF0000'
      }
    }
  });
});

但它不会对默认的黄色 3px 荧光笔进行任何更改。

Answer 1

以下对我有用：

this.paper.on('element:pointerdown', function(elementView) {
  elementView.highlight(null /* defaults to cellView.el */, {
    highlighter:{
      name: 'stroke',
      options: {
        padding: 10,
        rx: 5,
        ry: 5,
        attrs: {
          'stroke-width': 13,
          stroke: '#FF0000'
        }
      }
    }
  });
});

https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#highlighters

Answer 2

我通过简单地覆盖 css class 解决了我的问题；

.joint-highlight-stroke.joint-theme-default {
    stroke: #0157B9 !important;
    stroke-width: 3px !important;
}

自定义荧光笔

Customize highlighter

javascript

jointjs

rappid