首页 > 解决方案 > 如何摆脱织物中画布拖动时的蓝色突出显示框

问题描述

我只想摆脱在使用fabric js时在画布中拖动时出现的蓝色突出显示框。

我已经搜索到摆脱这个,但到目前为止没有出现。我唯一尝试的是:

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

但这不适用于画布,仅适用于文本

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

当您尝试拖动画布时,不应该出现蓝色突出显示框,我该如何关闭它?

参考:https ://jsfiddle.net/dyjLaqk7/4/

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

标签: javascriptjqueryhtmlcssfabricjs

解决方案


只需添加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>


推荐阅读