javascript - 如何摆脱织物中 Canvas 拖动时的蓝色突出显示框

Question

我只是想摆脱使用 Fabric js 时在 Canvas 中拖动时出现的蓝色突出显示框。

我已经寻找摆脱这个问题的方法，但到目前为止什么也没出现。 我唯一尝试过的是:

#c{
-webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
}

但这不适用于 Canvas ，仅适用于文本

//js part
var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('https://image.shutterstock.com/image-photo/large-beautiful-drops-transparent-rain-260nw-668593321.jpg', function(img) {

  img.width = 200;
  img.height = 200;
  canvas.add(img);
  img.lockRotation = true;
  img.lockMovementX = true;
  img.lockMovementY = true;
  img.lockUniScaling = true;
  img.lockScalingY = true;
});
var panning = false;
canvas.on('mouse:down', function(e) {
  panning = true;
  //style.cursor = "pointer";
  console.log("hhhhhhhh")
});

canvas.on('mouse:up', function(e) {
  panning = false;
  console.log("babab")
});
canvas.on('mouse:move', function(e) {
  if (panning && e && e.e) {
    var units = 10;
    var delta = new fabric.Point(e.e.movementX, e.e.movementY);
    canvas.relativePan(delta);
  }
});
canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var pointer = canvas.getPointer(opt.e);
  var zoom = canvas.getZoom();
  zoom = zoom + delta / 400;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({
    x: opt.e.offsetX,
    y: opt.e.offsetY
  }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});

canvas.on('mouse:down', function(opt) {
  var evt = opt.e;
  if (evt.altKey === true) {
    this.isDragging = true;
    this.selection = false;
    this.lastPosX = evt.clientX;
    this.lastPosY = evt.clientY;
  }
});
canvas.on('mouse:move', function(opt) {
  if (this.isDragging) {
    var e = opt.e;
    this.viewportTransform[4] += e.clientX - this.lastPosX;
    this.viewportTransform[5] += e.clientY - this.lastPosY;
    this.requestRenderAll();
    this.lastPosX = e.clientX;
    this.lastPosY = e.clientY;
  }
});
canvas.on('mouse:up', function(opt) {
  this.isDragging = false;
  this.selection = true;
});

#c {
  border: solid red 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
}

p {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<p>saddsa</p>
<canvas id="c" width="800" height="600"></canvas>
<style>

</style>

当您尝试拖动 Canvas 时，不应出现蓝色突出显示框，如何将其关闭？

引用:https://jsfiddle.net/dyjLaqk7/4/

编辑:感谢马克的回答，这是工作版本:https://jsfiddle.net/darrenz/wb7utjaf/69/ (第 27 行)

Answer 1

只需将 canvas.selection = false; 添加到 mouse:move 函数即可。

//js part
var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('https://image.shutterstock.com/image-photo/large-beautiful-drops-transparent-rain-260nw-668593321.jpg', function(img) {

  img.width = 200;
  img.height = 200;
  canvas.add(img);
  img.lockRotation = true;
  img.lockMovementX = true;
  img.lockMovementY = true;
  img.lockUniScaling = true;
  img.lockScalingY = true;
});
var panning = false;
canvas.on('mouse:down', function(e) {
  panning = true;
  //style.cursor = "pointer";
  console.log("hhhhhhhh")
});

canvas.on('mouse:up', function(e) {
  panning = false;
  console.log("babab")
});
canvas.on('mouse:move', function(e) {
//turn off selection
canvas.selection = false;
  if (panning && e && e.e) {
    var units = 10;
    var delta = new fabric.Point(e.e.movementX, e.e.movementY);
    canvas.relativePan(delta);
  }
});
canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var pointer = canvas.getPointer(opt.e);
  var zoom = canvas.getZoom();
  zoom = zoom + delta / 400;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({
    x: opt.e.offsetX,
    y: opt.e.offsetY
  }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});

canvas.on('mouse:down', function(opt) {
  var evt = opt.e;
  if (evt.altKey === true) {
    this.isDragging = true;
    this.selection = false;
    this.lastPosX = evt.clientX;
    this.lastPosY = evt.clientY;
  }
});
canvas.on('mouse:move', function(opt) {
  if (this.isDragging) {
    var e = opt.e;
    this.viewportTransform[4] += e.clientX - this.lastPosX;
    this.viewportTransform[5] += e.clientY - this.lastPosY;
    this.requestRenderAll();
    this.lastPosX = e.clientX;
    this.lastPosY = e.clientY;
  }
});
canvas.on('mouse:up', function(opt) {
  this.isDragging = false;
  this.selection = true;
});

#c {
  border: solid red 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
}

p {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<p>saddsa</p>
<canvas id="c" width="800" height="600"></canvas>
<style>

</style>