javascript - 如何在鼠标释放时完成Openlayers中的手绘图

我要在释放鼠标按钮而不是双击时完成绘图。我该如何实现？

现在，我默认使用以下代码在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 。

在pointerup上听ol.Map，如果要绘制，请以 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/

关于javascript - 如何在鼠标释放时完成Openlayers中的手绘图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33928061/