我有2个FabricJS画布和一些键盘移动功能。我可以在2个画布周围添加和拖动文本,但受到限制(根据需要)。但是,如果选择一个对象并使用箭头键移动它,则该对象不会绑定到“出血区域”。如何将限制应用于键盘移动?
var activeCanvas, front, back, canvas1, canvas2;
$(document).ready(function() {
canvas1 = new fabric.Canvas('front');
canvas2 = new fabric.Canvas('back');
canvas1.setHeight(360);
canvas1.setWidth(208);
canvas2.setHeight(360);
canvas2.setWidth(208);
changeView(1);
var padding = 20;
canvas1.on('object:moving', onObjectMoving);
canvas2.on('object:moving', onObjectMoving);
function onObjectMoving(e) {
var obj = e.target;
// if object is too big ignore
if (obj.currentHeight > obj.canvas.height - padding * 2 ||
obj.currentWidth > obj.canvas.width - padding * 2) {
return;
}
obj.setCoords();
// top-left corner
if (obj.getBoundingRect().top < padding ||
obj.getBoundingRect().left < padding) {
obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top + padding);
obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left + padding);
}
// bot-right corner
if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height - padding ||
obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width - padding) {
obj.top = Math.min(
obj.top,
obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - padding);
obj.left = Math.min(
obj.left,
obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - padding);
}
};
});
function changeView(value) {
if (value == 1) {
activeCanvas = canvas1;
$('#front').parent().css('display', 'block');
$('#back').parent().css('display', 'none');
}
if (value == 2) {
activeCanvas = canvas2;
$('#front').parent().css('display', 'none');
$('#back').parent().css('display', 'block');
}
}
function dropText() {
var text = new fabric.Text('test');
activeCanvas.add(text);
}
// Keyboard Movement
const STEP = 1;
var Direction = {
LEFT: 0,
UP: 1,
RIGHT: 2,
DOWN: 3
};
fabric.util.addListener(document.body, 'keydown', function(options) {
if (options.repeat) {
return;
}
var key = options.which || options.keyCode; // key detection
if (key === 37) { // handle Left key
moveSelected(Direction.LEFT);
} else if (key === 38) { // handle Up key
moveSelected(Direction.UP);
} else if (key === 39) { // handle Right key
moveSelected(Direction.RIGHT);
} else if (key === 40) { // handle Down key
moveSelected(Direction.DOWN);
}
});
function moveSelected(direction) {
var activeObject = activeCanvas.getActiveObject();
var activeGroup = activeCanvas.getActiveGroup();
if (activeObject) {
switch (direction) {
case Direction.LEFT:
activeObject.setLeft(activeObject.getLeft() - STEP);
break;
case Direction.UP:
activeObject.setTop(activeObject.getTop() - STEP);
break;
case Direction.RIGHT:
activeObject.setLeft(activeObject.getLeft() + STEP);
break;
case Direction.DOWN:
activeObject.setTop(activeObject.getTop() + STEP);
break;
}
activeObject.setCoords();
activeCanvas.renderAll();
console.log('selected objects was moved');
} else if (activeGroup) {
switch (direction) {
case Direction.LEFT:
activeGroup.setLeft(activeGroup.getLeft() - STEP);
break;
case Direction.UP:
activeGroup.setTop(activeGroup.getTop() - STEP);
break;
case Direction.RIGHT:
activeGroup.setLeft(activeGroup.getLeft() + STEP);
break;
case Direction.DOWN:
activeGroup.setTop(activeGroup.getTop() + STEP);
break;
}
activeGroup.setCoords();
activeCanvas.renderAll();
console.log('selected group was moved');
} else {
console.log('no object selected');
}
}
canvas {
border: 1px solid #dddddd;
margin-top: 10px;
border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<button onclick="changeView(1);">Front</button>
<button onclick="changeView(2);">Back</button>
<button onclick="dropText();">Add Text</button>
<div style="text-align: center">
<canvas id="front"></canvas>
<canvas id="back"></canvas>
</div>
答案 0 :(得分:1)
您需要手动触发object:moving
事件。
activeCanvas.trigger('object:moving', {
target: activeObject
})
查看演示(也在jsFiddle上):
var activeCanvas, front, back, canvas1, canvas2;
$(document).ready(function() {
canvas1 = new fabric.Canvas('front');
canvas2 = new fabric.Canvas('back');
canvas1.setHeight(360);
canvas1.setWidth(208);
canvas2.setHeight(360);
canvas2.setWidth(208);
changeView(1);
var padding = 20;
canvas1.on('object:moving', onObjectMoving);
canvas2.on('object:moving', onObjectMoving);
function onObjectMoving(e) {
var obj = e.target;
// if object is too big ignore
if (obj.currentHeight > obj.canvas.height - padding * 2 ||
obj.currentWidth > obj.canvas.width - padding * 2) {
return;
}
obj.setCoords();
// top-left corner
if (obj.getBoundingRect().top < padding ||
obj.getBoundingRect().left < padding) {
obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top + padding);
obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left + padding);
}
// bot-right corner
if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height - padding ||
obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width - padding) {
obj.top = Math.min(
obj.top,
obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - padding);
obj.left = Math.min(
obj.left,
obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - padding);
}
};
});
function changeView(value) {
if (value == 1) {
activeCanvas = canvas1;
$('#front').parent().css('display', 'block');
$('#back').parent().css('display', 'none');
}
if (value == 2) {
activeCanvas = canvas2;
$('#front').parent().css('display', 'none');
$('#back').parent().css('display', 'block');
}
}
function dropText() {
var text = new fabric.Text('test');
activeCanvas.add(text);
}
// Keyboard Movement
const STEP = 1;
var Direction = {
LEFT: 0,
UP: 1,
RIGHT: 2,
DOWN: 3
};
fabric.util.addListener(document.body, 'keydown', function(options) {
if (options.repeat) {
return;
}
var key = options.which || options.keyCode; // key detection
if (key === 37) { // handle Left key
moveSelected(Direction.LEFT);
} else if (key === 38) { // handle Up key
moveSelected(Direction.UP);
} else if (key === 39) { // handle Right key
moveSelected(Direction.RIGHT);
} else if (key === 40) { // handle Down key
moveSelected(Direction.DOWN);
}
});
function moveSelected(direction) {
var activeObject = activeCanvas.getActiveObject();
var activeGroup = activeCanvas.getActiveGroup();
if (activeObject) {
switch (direction) {
case Direction.LEFT:
activeObject.setLeft(activeObject.getLeft() - STEP);
break;
case Direction.UP:
activeObject.setTop(activeObject.getTop() - STEP);
break;
case Direction.RIGHT:
activeObject.setLeft(activeObject.getLeft() + STEP);
break;
case Direction.DOWN:
activeObject.setTop(activeObject.getTop() + STEP);
break;
}
activeObject.setCoords();
activeCanvas.trigger('object:moving', {
target: activeObject
})
activeCanvas.renderAll();
console.log('selected objects was moved');
} else if (activeGroup) {
switch (direction) {
case Direction.LEFT:
activeGroup.setLeft(activeGroup.getLeft() - STEP);
break;
case Direction.UP:
activeGroup.setTop(activeGroup.getTop() - STEP);
break;
case Direction.RIGHT:
activeGroup.setLeft(activeGroup.getLeft() + STEP);
break;
case Direction.DOWN:
activeGroup.setTop(activeGroup.getTop() + STEP);
break;
}
activeGroup.setCoords();
activeCanvas.trigger('object:moving', {
target: activeGroup
})
activeCanvas.renderAll();
console.log('selected group was moved');
} else {
console.log('no object selected');
}
}
canvas {
border: 1px solid #dddddd;
margin-top: 10px;
border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<button onclick="changeView(1);">Front</button>
<button onclick="changeView(2);">Back</button>
<button onclick="dropText();">Add Text</button>
<div style="text-align: center">
<canvas id="front"></canvas>
<canvas id="back"></canvas>
</div>