识别用户何时点击 canvas 上的对象
Identify when user clicks on an object on the canvas
我正在创建一个应用程序 user clicks on the canvas, a draggable rectangle object is created on the coordinates of the mouse click
。我已经成功实现了这一点,但我遇到的问题是每次我尝试调整或拖动 canvas 上已经添加的矩形时,它都会创建新对象。
如果您的专家能提供任何代码片段/参考以便我能够实现这一点,我将不胜感激。 :) 谢谢 下面是我的代码片段。
HTML
<input type="button" value="addrect" onclick="addrect()">
<input type="button" value="undo" onclick="undo()">
<input type="button" value="redo" onclick="redo()">
<input type="button" value="clear" onclick="clearcan()">
<br/>
<canvas id="fabriccanvas" width="600" height="200" style="border:1px solid #ccc"></canvas>
JS
/*
undo redo commandhistory with canvas
*/
var canvas = new fabric.Canvas('fabriccanvas');
canvas.counter = 0;
var newleft = 0;
canvas.selection = false;
canvas.on('mouse:up', function (e) {
addrect(e.e.clientY, e.e.clientX, 100, 100, "#CCCCC");
});
addrect = function addrect(top, left, width, height, fill) {
canvas.add(new fabric.Rect({
top: top,
name: 'rectangle ' + window.counter,
left: left,
width: 100,
height: 100,
fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
//fix attributes applied for all rects
opacity: 0.75,
lockRotation: true,
originX: 2,
originY: 10,
cornerSize: 15,
hasRotatingPoint: false,
perPixelTargetFind: true,
minScaleLimit: 1
}));
updateModifications(true);
canvas.counter++;
newleft += 100;
}
var state = [];
var mods = 0;
canvas.on(
'object:modified', function () {
updateModifications(true);
},
'object:added', function () {
updateModifications(true);
});
function updateModifications(savehistory) {
if (savehistory === true) {
myjson = JSON.stringify(canvas);
state.push(myjson);
}
}
undo = function undo() {
if (mods < state.length) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
canvas.renderAll();
//console.log("geladen " + (state.length-1-mods-1));
//console.log("state " + state.length);
mods += 1;
//console.log("mods " + mods);
}
}
redo = function redo() {
if (mods > 0) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods + 1]);
canvas.renderAll();
//console.log("geladen " + (state.length-1-mods+1));
mods -= 1;
//console.log("state " + state.length);
//console.log("mods " + mods);
}
}
clearcan = function clearcan() {
canvas.clear().renderAll();
newleft = 0;
}
我尝试了很多方法来解决这个问题,但无法完成,如果您的专家能为我提供解决方案,我将不胜感激:)谢谢
编辑
我知道这个问题是因为我正在捕获鼠标单击事件来创建对象,并且在拖动现有对象时应用相同的事件,从而在 canvas 上创建一个新对象。对于如何解决此问题的任何建议,我将不胜感激:)
我找到了解决这个问题的方法。如果有人遇到这个问题,这里就是答案。
canvas.on('mouse:up', function (e) {
//check if user clicked an object
if (e.target) {
//clicked on object
alert('clicked on object');
}else{
//add rectangle
addrect(e.e.clientY, e.e.clientX, 100, 100, "#CCCCC");
}
});
此解决方案在 http://fabricjs.com/fabric-intro-part-2/#events 中定义。在此处单击鼠标,我正在检查它是否是 canvas 上的对象。如果它不是一个对象,我添加一个新的矩形。希望这有帮助:)
当用户单击对象时,该对象将处于活动状态,并且将触发 object:selected 事件。
canvas.on({
'object:selected': myfunction
});
在我的函数中你可以写你的逻辑。
function myfunction(){
alert("Object Selected.");
}
我正在创建一个应用程序 user clicks on the canvas, a draggable rectangle object is created on the coordinates of the mouse click
。我已经成功实现了这一点,但我遇到的问题是每次我尝试调整或拖动 canvas 上已经添加的矩形时,它都会创建新对象。
如果您的专家能提供任何代码片段/参考以便我能够实现这一点,我将不胜感激。 :) 谢谢 下面是我的代码片段。
HTML
<input type="button" value="addrect" onclick="addrect()">
<input type="button" value="undo" onclick="undo()">
<input type="button" value="redo" onclick="redo()">
<input type="button" value="clear" onclick="clearcan()">
<br/>
<canvas id="fabriccanvas" width="600" height="200" style="border:1px solid #ccc"></canvas>
JS
/*
undo redo commandhistory with canvas
*/
var canvas = new fabric.Canvas('fabriccanvas');
canvas.counter = 0;
var newleft = 0;
canvas.selection = false;
canvas.on('mouse:up', function (e) {
addrect(e.e.clientY, e.e.clientX, 100, 100, "#CCCCC");
});
addrect = function addrect(top, left, width, height, fill) {
canvas.add(new fabric.Rect({
top: top,
name: 'rectangle ' + window.counter,
left: left,
width: 100,
height: 100,
fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
//fix attributes applied for all rects
opacity: 0.75,
lockRotation: true,
originX: 2,
originY: 10,
cornerSize: 15,
hasRotatingPoint: false,
perPixelTargetFind: true,
minScaleLimit: 1
}));
updateModifications(true);
canvas.counter++;
newleft += 100;
}
var state = [];
var mods = 0;
canvas.on(
'object:modified', function () {
updateModifications(true);
},
'object:added', function () {
updateModifications(true);
});
function updateModifications(savehistory) {
if (savehistory === true) {
myjson = JSON.stringify(canvas);
state.push(myjson);
}
}
undo = function undo() {
if (mods < state.length) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
canvas.renderAll();
//console.log("geladen " + (state.length-1-mods-1));
//console.log("state " + state.length);
mods += 1;
//console.log("mods " + mods);
}
}
redo = function redo() {
if (mods > 0) {
canvas.clear().renderAll();
canvas.loadFromJSON(state[state.length - 1 - mods + 1]);
canvas.renderAll();
//console.log("geladen " + (state.length-1-mods+1));
mods -= 1;
//console.log("state " + state.length);
//console.log("mods " + mods);
}
}
clearcan = function clearcan() {
canvas.clear().renderAll();
newleft = 0;
}
我尝试了很多方法来解决这个问题,但无法完成,如果您的专家能为我提供解决方案,我将不胜感激:)谢谢
编辑
我知道这个问题是因为我正在捕获鼠标单击事件来创建对象,并且在拖动现有对象时应用相同的事件,从而在 canvas 上创建一个新对象。对于如何解决此问题的任何建议,我将不胜感激:)
我找到了解决这个问题的方法。如果有人遇到这个问题,这里就是答案。
canvas.on('mouse:up', function (e) {
//check if user clicked an object
if (e.target) {
//clicked on object
alert('clicked on object');
}else{
//add rectangle
addrect(e.e.clientY, e.e.clientX, 100, 100, "#CCCCC");
}
});
此解决方案在 http://fabricjs.com/fabric-intro-part-2/#events 中定义。在此处单击鼠标,我正在检查它是否是 canvas 上的对象。如果它不是一个对象,我添加一个新的矩形。希望这有帮助:)
当用户单击对象时,该对象将处于活动状态,并且将触发 object:selected 事件。
canvas.on({
'object:selected': myfunction
});
在我的函数中你可以写你的逻辑。
function myfunction(){
alert("Object Selected.");
}