Как избавиться от синей подсветки при перетаскивании на холст из ткани - PullRequest
Новая
       3

Как избавиться от синей подсветки при перетаскивании на холст из ткани

2 голосов
/ 24 сентября 2019

Я просто хочу избавиться от синего поля подсветки, которое появляется, когда вы перетаскиваете холст при использовании ткани 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)

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

Просто добавьте 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>
0 голосов
/ 24 сентября 2019

Я видел вопросы, подобные этому.Попробуйте добавить 

    .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 к холсту или тому, на что нажимаете.

Например, 

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