Question

我设计了一个页面，用于在画布中使用鼠标绘制线条并拖放项目。

我的主要问题是我只能删除一个项目。第二个问题是我无法克隆项目，所以我在开始时将它们复制到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);

        }

Answer 1

最新的KineticJS 4.3有一个.clone（）方法可以使用。

 group.on('click', function(){ 
    var newRect = rect.clone();
    shapesLayer.add(newRect);
    newRect.simulate('mousedown');
    newRect.simulate('dragstart');
 }

请参阅：http://jsfiddle.net/CPrEe/38/

如果您想删除图层中的所有项目，您可以这样做：

 layer.removeChildren();

或只是做：

 layer.hide();

这样你就看不到整个图层了。

更新 http://jsfiddle.net/CPrEe/77/

group.on('click', function(){ 
    var newRect = rect.clone();
    shapesLayer.add(newRect);
    newRect.fire('mousedown');
    newRect.fire('dragstart');
}

JQuery和KineticJS HTML5 Draw and Drag＆amp; Drop

1 个答案: