如何摆脱在 fabric 中拖动 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

我看到过类似的问题。尝试添加

    .noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

到您的 css，然后将 .noselect 属性添加到 canvas 或任何被点击的内容。

例如，

<p class="noselect">
  Unselectable element.
</p>

Answer 2

只需将 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>

如何摆脱在 fabric 中拖动 canvas 时的蓝色高亮框

How to get rid of blue highlight box on drag for canvas in fabric

html

javascript

css

jquery

fabricjs