キャンバスでマウスを使用して線を描画し、アイテムをドラッグアンドドロップするページを設計しました。
私の主な問題は、1つのアイテムしか削除できないことです。2番目の問題は、アイテムをドラッグしても複製できないため、最初にforループで複製することです。
これは完全なページです:http://www.trustweb.it/Html5draw/
これは、ドラッグアンドドロップアイテムに関連するJavaScriptです。
/***DRAG&DROP ITEMS ***/
var overitem=0;
var start = null;
function bindGroupEvents(group, rect, trash) {
group.on('mouseover', function() {
overitem=1;
if(group.getStage()) {
trash.moveTo(group);
trash.show();
trash.getLayer().draw();
document.body.style.cursor = 'pointer';
}
});
group.on('mouseout', function() {
trash.hide();
trash.getLayer().draw();
document.body.style.cursor = 'default';
overitem=0;
});
group.on('dragmove', function() {
if(start) {
var rect = group.get('.rect')[0];
rect.setWidth(start.rectWidth + group.getX() - start.groupX);
rect.setHeight(start.rectHeight + start.groupY - group.getY());
group.setX(start.groupX);
trash.setX(rect.getWidth() - 24);
// draw shapes layer and handle layer
trash.getStage().draw();
}
});
group.on('dragstart', function() {
/*
if(group.getId()=='dryer' || group.getId()=='washing' )
{
alert('to be cloned');
}
*/
group.moveToTop();
});
}
function bindTrashEvents(trash) {
trash.on('mouseover', function() {
console.log('over');
var group = trash.getParent();
var rect = group.get('.rect')[0];
start = {
groupX: group.getX(),
groupY: group.getY(),
rectWidth: rect.getWidth(),
rectHeight: rect.getHeight()
};
});
trash.on('mouseout', function(){
start = null;
});
trash.on('click', function() {
alert('click');
trash.getParent().transitionTo({
opacity: 0,
duration: 0.2,
callback: function() {
var rect = trash.getParent().remove();
}
})
});
}
/*** END DRAG&DROP ***/
window.onload = function() {
var layer = new Kinetic.Layer();
var stage = new Kinetic.Stage({
container: "container",
width: 978,
height: 598
});
/** DRAG&DROP UITEM **/
var shapesLayer = new Kinetic.Layer();
var editLayer = new Kinetic.Layer();
// build trash
trash = new Kinetic.Image({
visible: false,
opacity: 0.7,
x: 3,
y: 3
});
// load trash image
var trashImg = new Image();
trashImg.onload = function() {
trash.setImage(trashImg);
editLayer.add(trash);
};
trashImg.src = 'x.png';
bindTrashEvents(trash);
// build rectangles
var colors = ['red', 'orange'];
/* washing machine */
for(i=0;i<30;i++)
{
var group = new Kinetic.Group({
x: 1,
y: 1,
id:'washing',
draggable: true
});
var rect = new Kinetic.Rect({
width: 50,
height:50,
fill: colors[0],
stroke: 'black',
opacity: 0.85,
name: 'rect'
});
bindGroupEvents(group, rect, trash);
group.add(rect);
shapesLayer.add(group);
}
/* dryer */
for(i=0;i<30;i++)
{
var group = new Kinetic.Group({
x: 100,
y: 1,
draggable: true
});
var rect = new Kinetic.Rect({
width: 50,
height:50,
fill: colors[1],
stroke: 'black',
opacity: 0.85,
name: 'rect'
});
bindGroupEvents(group, rect, trash);
group.add(rect);
shapesLayer.add(group);
}
stage.add(shapesLayer);
stage.add(editLayer);
}