如何在鼠标释放时在 Openlayers 中完成手绘

Question

我想在释放鼠标按钮而不是双击时完成绘图。我怎样才能做到这一点？

现在我默认使用此代码在 Openlayers drawing feature 上激活手绘：

draw = new ol.interaction.Draw({
  source: drawLayerSource,
  type: 'LineString',
  condition: ol.events.condition.singleClick,
  freehandCondition: ol.events.condition.noModifierKeys
});
map.addInteraction(draw);

但我不知道如何避免双击完成线串并改用鼠标释放。

Answer 1

更新 - https://jsfiddle.net/jonataswalker/frwfuzzn/

为了同时启用手绘和直线，我正在使用此函数计算绘图开始和指针向上之间的经过时间：

var isStraightLine = function(){
  var now = new Date();
  // `start_time` was set at the drawing beginning
  var diff = now - start_time;
  // strip the ms
  diff /= 1000;
  already_checked = true;
  // an average time I found here
  // not sure if this is completely reliable
  return diff < 0.07;
};

如果我发现这是draw.finishDrawing() 的手绘完成。为了理解，最好检查代码。

---

我可以，但前提是您保持 freehandCondition 默认条件 - ol.events.condition.shiftKeyOnly。

在ol.Map 上收听pointerup，如果您正在绘画，请以ol.interaction.Draw#finishDrawing 结束。

var start_drawing = false;
var draw = new ol.interaction.Draw({
  source: vectorSource,
  type: 'LineString',
  condition: ol.events.condition.singleClick
});
map.addInteraction(draw);

draw.on('drawstart', function(evt){
  start_drawing = true;
});
draw.on('drawend', function(evt){
  start_drawing = false;
});
map.on('pointerup', function(evt){
  if(start_drawing) {
    draw.finishDrawing();
  }
});

http://jsfiddle.net/jonataswalker/ewv0mo3c/