Javascript 当锚点与KineticJS重叠时，代码中断
当锚重叠时，代码中断。我在下面的教程中给出了调整可拖动形状组大小的锚。我还具有删除所选组的功能。当定位点（两个不同组）重叠且选择了重叠定位点（鼠标向下）时，删除功能会中断代码Javascript 当锚点与KineticJS重叠时，代码中断,javascript,html,kineticjs,Javascript,Html,Kineticjs,当锚重叠时，代码中断。我在下面的教程中给出了调整可拖动形状组大小的锚。我还具有删除所选组的功能。当定位点（两个不同组）重叠且选择了重叠定位点（鼠标向下）时，删除功能会中断代码 var SelectedShape = null; function update(activeAnchor) { var group = activeAnchor.getParent(); var topLeft = group.get('.topLeft')[0]; var t
var SelectedShape = null;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rect = group.get('.rect')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
rect.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
rect.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
});
group.add(anchor);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var Group3 = new Kinetic.Group({
x: 100,
y: 300,
draggable: true
});
var layer = new Kinetic.Layer();
/* add the groups to the layer and the layer to the stage*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
layer.add(Group3);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 200,
height: 138,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 93, 0, 'topRight');
addAnchor(yodaGroup, 93, 104, 'bottomRight');
addAnchor(yodaGroup, 0, 104, 'bottomLeft');
yodaGroup.on('dragstart', function () {
this.moveToTop();
});
var rect3 = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
Group3.add(rect3);
addAnchor(Group3, 0, 0, 'topLeft');
addAnchor(Group3, 93, 0, 'topRight');
addAnchor(Group3, 93, 104, 'bottomRight');
addAnchor(Group3, 0, 104, 'bottomLeft');
Group3.on('dragstart', function () {
this.moveToTop();
});
stage.draw();
//Deleting selected shape
window.addEventListener('keydown', function (e) {
if (layer !== null && e.keyCode == 46) { //Delete Key = 46
SelectedShape.remove();
layer.batchDraw();
}
});
//Selecting on mousedown
layer.on('mousedown', function (evt) {
SelectedShape = evt.targetNode.getParent();
});
</script>
var SelectedShape = null;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rect = group.get('.rect')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
rect.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
rect.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
});
group.add(anchor);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var Group3 = new Kinetic.Group({
x: 100,
y: 300,
draggable: true
});
var layer = new Kinetic.Layer();
/* add the groups to the layer and the layer to the stage*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
layer.add(Group3);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 200,
height: 138,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 93, 0, 'topRight');
addAnchor(yodaGroup, 93, 104, 'bottomRight');
addAnchor(yodaGroup, 0, 104, 'bottomLeft');
yodaGroup.on('dragstart', function () {
this.moveToTop();
});
var rect3 = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
Group3.add(rect3);
addAnchor(Group3, 0, 0, 'topLeft');
addAnchor(Group3, 93, 0, 'topRight');
addAnchor(Group3, 93, 104, 'bottomRight');
addAnchor(Group3, 0, 104, 'bottomLeft');
Group3.on('dragstart', function () {
this.moveToTop();
});
stage.draw();
//Deleting selected shape
window.addEventListener('keydown', function (e) {
if (layer !== null && e.keyCode == 46) { //Delete Key = 46
SelectedShape.remove();
layer.batchDraw();
}
});
//Selecting on mousedown
layer.on('mousedown', function (evt) {
SelectedShape = evt.targetNode.getParent();
});
</script>
var SelectedShape = null;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rect = group.get('.rect')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
rect.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
rect.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
});
group.add(anchor);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var Group3 = new Kinetic.Group({
x: 100,
y: 300,
draggable: true
});
var layer = new Kinetic.Layer();
/* add the groups to the layer and the layer to the stage*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
layer.add(Group3);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 200,
height: 138,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 93, 0, 'topRight');
addAnchor(yodaGroup, 93, 104, 'bottomRight');
addAnchor(yodaGroup, 0, 104, 'bottomLeft');
yodaGroup.on('dragstart', function () {
this.moveToTop();
});
var rect3 = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
Group3.add(rect3);
addAnchor(Group3, 0, 0, 'topLeft');
addAnchor(Group3, 93, 0, 'topRight');
addAnchor(Group3, 93, 104, 'bottomRight');
addAnchor(Group3, 0, 104, 'bottomLeft');
Group3.on('dragstart', function () {
this.moveToTop();
});
stage.draw();
//Deleting selected shape
window.addEventListener('keydown', function (e) {
if (layer !== null && e.keyCode == 46) { //Delete Key = 46
SelectedShape.remove();
layer.batchDraw();
}
});
//Selecting on mousedown
layer.on('mousedown', function (evt) {
SelectedShape = evt.targetNode.getParent();
});
</script>
var SelectedShape = null;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rect = group.get('.rect')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
rect.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
rect.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
});
group.add(anchor);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var Group3 = new Kinetic.Group({
x: 100,
y: 300,
draggable: true
});
var layer = new Kinetic.Layer();
/* add the groups to the layer and the layer to the stage*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
layer.add(Group3);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 200,
height: 138,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 93, 0, 'topRight');
addAnchor(yodaGroup, 93, 104, 'bottomRight');
addAnchor(yodaGroup, 0, 104, 'bottomLeft');
yodaGroup.on('dragstart', function () {
this.moveToTop();
});
var rect3 = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
Group3.add(rect3);
addAnchor(Group3, 0, 0, 'topLeft');
addAnchor(Group3, 93, 0, 'topRight');
addAnchor(Group3, 93, 104, 'bottomRight');
addAnchor(Group3, 0, 104, 'bottomLeft');
Group3.on('dragstart', function () {
this.moveToTop();
});
stage.draw();
//Deleting selected shape
window.addEventListener('keydown', function (e) {
if (layer !== null && e.keyCode == 46) { //Delete Key = 46
SelectedShape.remove();
layer.batchDraw();
}
});
//Selecting on mousedown
layer.on('mousedown', function (evt) {
SelectedShape = evt.targetNode.getParent();
});
</script>
var SelectedShape=null；
函数更新（activeAnchor）{
var group=activeAnchor.getParent（）；
var topLeft=group.get（'.topLeft'）[0]；
var topRight=group.get（'.topRight'）[0]；
var bottomRight=group.get（'.bottomRight'）[0]；
var bottomLeft=group.get（'.bottomLeft'）[0]；
var rect=group.get（'.rect'）[0]；
var anchorX=activeAnchor.getX（）；
var anchorY=activeAnchor.getY（）；
//更新锚点位置
开关（activeAnchor.getName（））{
案例“左上角”：
右上角。赛蒂（安科里）；
左下角。setX（anchorX）；
打破
案例“右上角”：
左上。赛蒂（安科里）；
右下角。setX（anchorX）；
打破
案例“右下角”：
左下角。setY（anchorY）；
右上角.setX（主播）；
打破
案例“左下角”：
右下角。赛蒂（安科里）；
左上角。setX（主播）；
打破
}
rect.setPosition（topLeft.getPosition（））；
var width=topRight.getX（）-topLeft.getX（）；
var height=bottomLeft.getY（）-topLeft.getY（）；
if（宽度和高度）{
矩形设置尺寸（宽度、高度）；
}
}
函数addAnchor（组、x、y、名称）{
var stage=group.getStage（）；
var layer=group.getLayer（）；
var anchor=新的动力学圆({
x:x，
y:y，
笔划：'#666'，
填写：“#ddd”，
冲程宽度：2，
半径：8，
姓名:姓名,，
真的，
龙顶：错
});
anchor.on（'dragmove'，函数（）{
更新（本）；
layer.draw（）；
});
anchor.on（'mousedown touchstart'，函数（）{
组。可设置拖动（false）；
这是moveToTop（）；
});
anchor.on（'dragend'，function（）{
group.SetDragable（真）；
layer.draw（）；
});
组。添加（锚定）；
}
var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：400
});
var darthVaderGroup=新的动力学组({
x:270，
y:100，
德拉格布尔：是的
});
var yodaGroup=新的动力学组({
x:100，
y:110，
德拉格布尔：是的
});
var Group3=新的动力学组({
x:100，
y:300，
德拉格布尔：是的
});
var layer=新的动能层（）；
/*将组添加到图层，并将图层添加到舞台*/
图层添加（darthVaderGroup）；
图层添加（yodaGroup）；
添加图层（第3组）；
阶段。添加（层）；
//达斯维德
var darthVaderImg=新动能.Rect({
x:0,，
y:0，
宽度：200，
身高：138，
填充：“绿色”，
笔画：“黑色”，
冲程宽度：4，
名称：“rect”
});
添加（darthVaderImg）；
addAnchor（darthVaderGroup，0,0，'左上'）；
addAnchor（darthVaderGroup，200,0，'右上角'）；
addAnchor（darthVaderGroup，200138，“右下角”）；
addAnchor（darthVaderGroup，0138，“左下角”）；
darthVaderGroup.on（'dragstart'，函数（）{
这是moveToTop（）；
});
//尤达
var yodaImg=新的动能.Rect({
x:0,，
y:0，
宽度：93，
身高：104，
填充：“红色”，
笔画：“黑色”，
冲程宽度：4，
名称：“rect”
});
yodaGroup.add（yodaImg）；
addAnchor（yodaGroup，0，0，'左上'）；
addAnchor（yodaGroup，93,0，'topRight'）；
addAnchor（yodaGroup，93104，“右下角”）；
addAnchor（yodaGroup，0104，'bottomLeft'）；
yodaGroup.on（'dragstart'，函数（）{
这是moveToTop（）；
});
var rect3=新的动能.Rect({
x:0,，
y:0，
宽度：93，
身高：104，
填充：“蓝色”，
笔画：“黑色”，
冲程宽度：4，
名称：“rect”
});
第3组：添加（rect3）；
addAnchor（组3，0，0，'左上'）；
addAnchor（第3、93、0组，“右上角”）；
addAnchor（第3、93、104组，“右下角”）；
addAnchor（第3、0、104组，“左下角”）；
Group3.on（'dragstart'，函数（）{
这是moveToTop（）；
});
stage.draw（）；
//删除选定形状
window.addEventListener（'keydown'，函数（e）{
如果（layer！==null&&e.keyCode==46）{//Delete Key=46
SelectedShape.remove（）；
layer.batchDraw（）；
}
});
//鼠标向下选择
layer.on（'mousedown'，函数（evt）{
SelectedShape=evt.targetNode.getParent（）；
});
var SelectedShape = null;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rect = group.get('.rect')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
rect.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
rect.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
});
group.add(anchor);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var Group3 = new Kinetic.Group({
x: 100,
y: 300,
draggable: true
});
var layer = new Kinetic.Layer();
/* add the groups to the layer and the layer to the stage*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
layer.add(Group3);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 200,
height: 138,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 93, 0, 'topRight');
addAnchor(yodaGroup, 93, 104, 'bottomRight');
addAnchor(yodaGroup, 0, 104, 'bottomLeft');
yodaGroup.on('dragstart', function () {
this.moveToTop();
});
var rect3 = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
Group3.add(rect3);
addAnchor(Group3, 0, 0, 'topLeft');
addAnchor(Group3, 93, 0, 'topRight');
addAnchor(Group3, 93, 104, 'bottomRight');
addAnchor(Group3, 0, 104, 'bottomLeft');
Group3.on('dragstart', function () {
this.moveToTop();
});
stage.draw();
//Deleting selected shape
window.addEventListener('keydown', function (e) {
if (layer !== null && e.keyCode == 46) { //Delete Key = 46
SelectedShape.remove();
layer.batchDraw();
}
});
//Selecting on mousedown
layer.on('mousedown', function (evt) {
SelectedShape = evt.targetNode.getParent();
});
</script>
//Selecting on mousedown
layer.on('mousedown', function (evt) {
SelectedShape = evt.targetNode.getParent();
});
var SelectedShape = null;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rect = group.get('.rect')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
rect.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
rect.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
});
group.add(anchor);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var Group3 = new Kinetic.Group({
x: 100,
y: 300,
draggable: true
});
var layer = new Kinetic.Layer();
/* add the groups to the layer and the layer to the stage*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
layer.add(Group3);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 200,
height: 138,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 93, 0, 'topRight');
addAnchor(yodaGroup, 93, 104, 'bottomRight');
addAnchor(yodaGroup, 0, 104, 'bottomLeft');
yodaGroup.on('dragstart', function () {
this.moveToTop();
});
var rect3 = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
Group3.add(rect3);
addAnchor(Group3, 0, 0, 'topLeft');
addAnchor(Group3, 93, 0, 'topRight');
addAnchor(Group3, 93, 104, 'bottomRight');
addAnchor(Group3, 0, 104, 'bottomLeft');
Group3.on('dragstart', function () {
this.moveToTop();
});
stage.draw();
//Deleting selected shape
window.addEventListener('keydown', function (e) {
if (layer !== null && e.keyCode == 46) { //Delete Key = 46
SelectedShape.remove();
layer.batchDraw();
}
});
//Selecting on mousedown
layer.on('mousedown', function (evt) {
SelectedShape = evt.targetNode.getParent();
});
</script>
var SelectedShape = null;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rect = group.get('.rect')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
rect.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
rect.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
});
group.add(anchor);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var Group3 = new Kinetic.Group({
x: 100,
y: 300,
draggable: true
});
var layer = new Kinetic.Layer();
/* add the groups to the layer and the layer to the stage*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
layer.add(Group3);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 200,
height: 138,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 93, 0, 'topRight');
addAnchor(yodaGroup, 93, 104, 'bottomRight');
addAnchor(yodaGroup, 0, 104, 'bottomLeft');
yodaGroup.on('dragstart', function () {
this.moveToTop();
});
var rect3 = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
Group3.add(rect3);
addAnchor(Group3, 0, 0, 'topLeft');
addAnchor(Group3, 93, 0, 'topRight');
addAnchor(Group3, 93, 104, 'bottomRight');
addAnchor(Group3, 0, 104, 'bottomLeft');
Group3.on('dragstart', function () {
this.moveToTop();
});
stage.draw();
//Deleting selected shape
window.addEventListener('keydown', function (e) {
if (layer !== null && e.keyCode == 46) { //Delete Key = 46
SelectedShape.remove();
layer.batchDraw();
}
});
//Selecting on mousedown
layer.on('mousedown', function (evt) {
SelectedShape = evt.targetNode.getParent();
});
</script>
yodaGroup.on('mousedown touchstart', function() {SelectedShape = this;});
然后它就会工作。请提供一些示例代码@使用示例代码在此处标记。BTW错误在示例代码中有所不同，但仍然与空引用相关。
var SelectedShape = null;
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var rect = group.get('.rect')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
rect.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
rect.setSize(width, height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function () {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.setDraggable(true);
layer.draw();
});
group.add(anchor);
}
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var Group3 = new Kinetic.Group({
x: 100,
y: 300,
draggable: true
});
var layer = new Kinetic.Layer();
/* add the groups to the layer and the layer to the stage*/
layer.add(darthVaderGroup);
layer.add(yodaGroup);
layer.add(Group3);
stage.add(layer);
// darth vader
var darthVaderImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 200,
height: 138,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// yoda
var yodaImg = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 93, 0, 'topRight');
addAnchor(yodaGroup, 93, 104, 'bottomRight');
addAnchor(yodaGroup, 0, 104, 'bottomLeft');
yodaGroup.on('dragstart', function () {
this.moveToTop();
});
var rect3 = new Kinetic.Rect({
x: 0,
y: 0,
width: 93,
height: 104,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
name: 'rect'
});
Group3.add(rect3);
addAnchor(Group3, 0, 0, 'topLeft');
addAnchor(Group3, 93, 0, 'topRight');
addAnchor(Group3, 93, 104, 'bottomRight');
addAnchor(Group3, 0, 104, 'bottomLeft');
Group3.on('dragstart', function () {
this.moveToTop();
});
stage.draw();
//Deleting selected shape
window.addEventListener('keydown', function (e) {
if (layer !== null && e.keyCode == 46) { //Delete Key = 46
SelectedShape.remove();
layer.batchDraw();
}
});
//Selecting on mousedown
layer.on('mousedown', function (evt) {
SelectedShape = evt.targetNode.getParent();
});
</script>