javascript - 如何摆脱织物中画布拖动时的蓝色突出显示框
问题描述
我只想摆脱在使用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行)
解决方案
只需添加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>
推荐阅读
- pdf - 从多个 md 文件创建一个笔记本
- c# - VS 2019 无法在文件夹中创建类
- python - 为什么 if not in(x,y) 在 python 中根本不起作用
- regex - 正则表达式以任何顺序匹配包含恰好两个相等单词的字符串
- python - 如何从 Python Numpy array1 中提取特定值并从这些值中创建一个与 array1 具有相同形状的新 array2
- java - 我的 java 计算器项目有错误。我不知道如何解决它们
- firebase - Firebase 和 One Signal 推送通知指南
- android - 什么机制导致在 Fragment 到 Fragment 导航中调用 View.onSaveInstanceState?
- asp.net-core - DotNetCore 3.1 中配置的双下划线似乎不像我预期的那样工作
- objective-c - 为什么我的约束在我的 xib 文件中不起作用