Question

我已经实现了以jointjs建议的方式突出显示所选单元格的highlight（）方法，该方法围绕具有2像素红色边框的单元格。这与Chrome完美配合，但我需要在IE中使用大纲。我查看了joint.css并且他们注意到大纲在IE中不起作用，所以他们所做的是改变单元格突出显示时的不透明度。这对用户来说并不方便，因为在选择时单元看起来是禁用的。

如何实现突出显示，以便细胞被轮廓包围，就像在Chrome中一样？任何想法/建议将不胜感激。

var graph = new joint.dia.Graph;

var width = 400;
var height = 400;
var gridSize = 1;

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: width,
    height: height,
    model: graph,
    gridSize: gridSize
});

paper.on('cell:pointerdown', function(cellView, evt, x, y){
      cellView.highlight();//highlight clicked element
});

var actor = new joint.shapes.basic.Rect({
    position: {x:100, y:30},
    attrs: {text: {text: 'drag me'}},
    size: { height: 92.7051, width: 150}
});

graph.addCell(actor);

<link rel="stylesheet" href="http://jointjs.com/css/style.css" />
<link rel="stylesheet" href="http://jointjs.com/css/joint.css" />        
<script src="http://jointjs.com/js/joint.js"></script>

<div id="paper"/>

Answer 1

我意识到这是一个老帖子，但有人可能会发现它有用。我的机器上没有IE来测试它，但这是实现自己的荧光笔的一种方法。

＆＃13;

var graph = new joint.dia.Graph;

var width = 400;
var height = 400;
var gridSize = 1;

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: width,
    height: height,
    model: graph,
    gridSize: gridSize
});

paper.on('cell:pointerdown', function(cellView, evt, x, y){
      //cellView.highlight();//highlight clicked element
      myHighlight(cellView.model.id);
});

var actor = new joint.shapes.basic.Rect({
    position: {x:100, y:30},
    attrs: {text: {text: 'drag me'}},
    size: { height: 92.7051, width: 150}
});

var myHighlight = function(cellId) {
    var cell = graph.getCell(cellId);
    cell.attr({
        rect: {
            stroke: 'red'
        }
    });
};

graph.addCell(actor);

＆＃13;

<link rel="stylesheet" href="http://jointjs.com/css/style.css" />
<link rel="stylesheet" href="http://jointjs.com/css/joint.css" />        
<script src="http://jointjs.com/js/joint.js"></script>

<div id="paper"/>

＆＃13;

Answer 2

JointJS v0.9.7及更低

每当单元格突出显示时，joint.dia.Paper会触发cell:highlight和cell:unhighlight。未加亮。可以取消绑定默认突出显示

paper.off('cell:highlight cell:unhighlight');

并绑定自定义的。例如：

// A rectangular highlighter element
var highlighter = V('rect', {
    'stroke': '#ff7e5d',
    'stroke-width': '6px',
    'fill': 'transparent',
    'pointer-events': 'none'
});

paper.on({
    'cell:highlight': function(cellView, el, opt) {
        // measure the element meant to be highlighted
        var bbox = V(el).bbox(false, paper.viewport);
        // set `x`, `y`, `width` and `hight` onto the highlighter element
        highlighter.attr(bbox);
        // add the highlighter to the DOM
        V(paper.viewport).append(highlighter);
     },

     'cell:unhighlight': function(cellView, el, opt) {
         // remove the highlighter from the DOM
         highlighter.remove();
     }
});

请参阅以下JSFiddle或查看JointJS网站上的演示文稿，其中还演示了突出显示。

JointJS v0.9.9及更高版本

cellView高亮显示已经过重构。不再使用CSS outline属性。有一个SVGPath元素，它模仿形状边界，直接附加到cellView。有关详细信息，请参阅此SO answer。

如何在IE中实现突出显示单元格？

2 个答案: