Javascript KineticsJS丢失鼠标事件随机绘制矩形
使用KineticJS,我必须绘制一个包含鼠标事件的矩形。 矩形必须标识一个区域,以便我可以选择位于其中的所有形状。 我使用不同的组来放置形状和线条 我的问题是Mouseup事件并不总是被触发,特别是使用IE。 我试过几种方法,但可能是我犯了某种错误 有什么想法吗 这是我的小提琴Javascript KineticsJS丢失鼠标事件随机绘制矩形,javascript,events,kineticjs,mouseup,Javascript,Events,Kineticjs,Mouseup,使用KineticJS,我必须绘制一个包含鼠标事件的矩形。 矩形必须标识一个区域,以便我可以选择位于其中的所有形状。 我使用不同的组来放置形状和线条 我的问题是Mouseup事件并不总是被触发,特别是使用IE。 我试过几种方法,但可能是我犯了某种错误 有什么想法吗 这是我的小提琴 你的小提琴对我很管用。我如何重新创建您的“Mouseup事件并不总是被触发”?你也可以监听mouseout事件,以防你的鼠标离开画布。这真的很奇怪,它是完全相同的代码。。。在JSFIDLE内部它可以工作,在我的Visu
你的小提琴对我很管用。我如何重新创建您的“Mouseup事件并不总是被触发”?你也可以监听mouseout事件,以防你的鼠标离开画布。这真的很奇怪,它是完全相同的代码。。。在JSFIDLE内部它可以工作,在我的VisualStudio中不工作。不用说了,谢谢你的支持。
var stage = null;
var mainLayer = null;
var infoLayer = null;
var debugLayer = null;
var groupSelected = null;
var groupDesign = null;
var groupLinkLines = null;
var rectSelector = null;
var objectsSelected = new Array();
var width = 400;
var height = 400;
var selectorInitX = 0;
var selectorInitY = 0;
//Lock semaphores
var lockObjectsSelector = false;
var lockSelBoxObjectsSelector = false;
var lockInDragObjectsSelector = false;
// Build stage and node tree
stage = new Kinetic.Stage({
container: 'container',
width: width,
height: height
});
mainLayer = new Kinetic.Layer();
groupSelected = new Kinetic.Group({
name: 'GroupSelected',
draggable: true,
x: 0,
y: 0,
height: stage.attrs.height,
width: stage.attrs.width
});
groupDesign = new Kinetic.Group({
name: 'GroupDesign',
draggable: false,
x: 0,
y: 0,
height: stage.attrs.height,
width: stage.attrs.width
});
groupLinkLines = new Kinetic.Group({
name: 'GroupLinkLines',
draggable: false,
x: 0,
y: 0,
height: stage.attrs.height,
width: stage.attrs.width
});
var objectsSelector = new Kinetic.Rect({
x: 0,
y: 0,
height: stage.attrs.height,
width: stage.attrs.width,
fill: 'transparent',
draggable: false,
name: 'objectsSelector'
});
// build node tree
groupDesign.add(objectsSelector);
mainLayer.add(groupDesign);
mainLayer.add(groupLinkLines);
mainLayer.add(groupSelected);
stage.add(mainLayer);
// Add events
objectsSelector.on('mousedown', function (evt) {
lockObjectsSelector = true;
//alert('event objectsSelector mousedown fired');
});
groupDesign.on('mousedown', function (e) {
if (objectsSelected.length > 0) {
objectsSelected.length = 0;
objectsSelected = new Array();
groupSelected.moveToBottom();
}
//alert('event groupDesign mousedown fired');
});
groupDesign.on('mousemove', function (e) {
if (lockObjectsSelector) {
SetSelRectPosition(e);
//alert('event groupDesign mousemove fired');
}
});
groupDesign.on('mouseup', function (e) {
if (lockObjectsSelector) {
lockObjectsSelector = false;
if (rectSelector !== null) rectSelector.remove();
rectSelector = null;
lockSelBoxObjectsSelector = false;
groupSelected.moveToTop();
mainLayer.draw();
}
alert('event groupDesign mouseup fired');
});
function SetSelRectPosition(e) {
if (lockObjectsSelector && !lockInDragObjectsSelector) {
lockInDragObjectsSelector = true;
var canvas = mainLayer.getCanvas();
var mousepos = stage.getPointerPosition();
var x = mousepos.x;
var y = mousepos.y;
if (!lockSelBoxObjectsSelector) {
selectorInitX = x;
selectorInitY = y;
//create the selection rectangle
rectSelector = new Kinetic.Rect({
x: selectorInitX,
y: selectorInitY,
height: 1,
width: 1,
fill: 'transparent',
stroke: 'black',
strokeWidth: 1
});
groupDesign.add(rectSelector);
mainLayer.draw();
lockSelBoxObjectsSelector = true;
}
else {
var newHeight = 0;
var newWidth = 0;
var newX = 0;
var newY = 0;
if (x > selectorInitX) newX = selectorInitX; else newX = x;
if (y > selectorInitY) newY = selectorInitY; else newY = y;
newHeight = Math.abs(Math.abs(y) - Math.abs(selectorInitY));
newWidth = Math.abs(Math.abs(x) - Math.abs(selectorInitX));
rectSelector.setHeight(newHeight);
rectSelector.setWidth(newWidth);
rectSelector.setX(newX);
rectSelector.setY(newY);
mainLayer.draw();
}
}
lockInDragObjectsSelector = false;
}