Question

我正在尝试在鼠标悬停时更改六边形的笔触颜色，然后在鼠标移动时返回原始颜色。

我的问题是，如果我在更新笔触颜色后仅重绘六边形，则前一个颜色会在笔划边缘附近徘徊。

hexagon.on('mouseover', function(e) {
  e.target.stroke('red');
  e.target.draw();
});

hexagon.on('mouseout', function(e) {
  e.target.stroke('gray');
  e.target.draw();
});

https://codepen.io/jsgarvin/pen/dmRJXj

演示

此处原始颜色为灰色，鼠标悬停时变为红色，但鼠标移出后会变回灰色，所有边缘都会出现红色灰尘。

如果我重绘整个图层，它看起来像我期望的那样，但在我的特定用例中，我希望在图层上有几千个六边形，而且重绘整个图层似乎效率低下如果我只需要更新一个六边形。有没有更正确的方法来做我忽略的事情？谢谢！

Answer 1

您需要绘制图层。

hexagon.on('mouseover', function(e) {
  e.target.stroke('red');
  e.target.draw();
  layer.draw();  // <<<<< THIS LINE IS THE FIX
  });

我发现了这一点，因为我编写了一个替代方案，我将其包含在下面的代码段中。它使用第二种形状，我们展示＆amp;隐藏这两个以便提供鼠标悬停效果。我可以想象，这在所有情况下都不可行，但它可能会帮助某人，所以这里是一个工作片段。

左手是您的笔中复制的示例，其中包含修复，右侧是形状切换器，只是为了好玩。

var stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 150
});

var layer = new Konva.Layer();
stage.add(layer);

  var c = layer.getCanvas();
  var ctx = c.getContext();

var hexagon = new Konva.RegularPolygon({
  x: 75,
  y: 75,
  radius: 55,
  sides: 6,
  stroke: 'gray',
  strokeWidth: 10
});
hexagon.on('mouseover', function(e) {
  e.target.stroke('red');
  e.target.draw();
  layer.draw();  // <<<<< THIS LINE IS THE FIX
  });
hexagon.on('mouseout', function(e) {
  e.target.stroke('gray');
  e.target.draw();
  layer.draw();  // <<<<< THIS LINE IS THE FIX
});


var hexagon2 = new Konva.RegularPolygon({
  x: 250,
  y: 75,
  radius: 55,
  sides: 6,
  stroke: 'gray',
  strokeWidth: 10
});
hexagon2.on('mouseover', function(e) {
  e.target.visible(false);
  hexagon3.visible(true);
  layer.draw();
});

var hexagon3 = new Konva.RegularPolygon({
  x: 250,
  y: 75,
  radius: 55,
  sides: 6,
  stroke: 'red',
  strokeWidth: 10,
  visible: false
});

hexagon3.on('mouseout', function(e) {
  e.target.visible(false);
  hexagon2.visible(true);
  layer.draw();
});
layer.add(hexagon);
layer.add(hexagon2);
layer.add(hexagon3);
stage.draw();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>

<p>Left image is OP's version, right is shape-switching. Mouse-over the hexagons.</p>

<div id='container'></div>

改变后，Konvajs塑造中风颜色

1 个答案: