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

Howto finish freehand drawing in Openlayers on mouse release

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

现在我使用这段代码在默认情况下激活 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);

但我不知道如何避免双击完成行字符串并改为使用鼠标释放。

更新 - 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/