在绘图中绘图

时间:2013-03-01 02:50:02

标签: jquery kineticjs

我正在尝试构建一个应用程序,允许绘制一个绘图,一个绘图,一个绘图等...到目前为止我所拥有的是jsfiddle http://jsfiddle.net/viciouskinid/MYYRa/

$(function () {

ABC.Container = function () {
    var base = this;

}

/////////////////////////////////////////////////////////////////////////////

ABC.Canvas = function (containerID) {
    var base = this;

    var $container = $("#" + containerID);
    base.stage = new Kinetic.Stage({
        container: containerID,
        width: $container.width(),
        height: $container.height(),
        //draggable: true,
    });
    //$container.css('height','');

    base.ui = {
        stage: base.stage,
        scale: 1,
        zoomFactor: 1.1,
        origin: {
            x: 0,
            y: 0
        }
    };
    base.selectedElement=null;

    base.init = function () { 
        $(window).resize(base.resize);
        $(base.stage.content).on('mousewheel', base.zoom);


        base.childgroup = new Kinetic.Group(); 
        base.layer = new Kinetic.Layer();
        base.layer.add(base.childgroup);
        base.stage.add(base.layer);
    }

    base.resize = function(event) {
        base.stage.width = $container.width();
        base.stage.height = $container.height();
    }
    base.zoom = function(event) {
        event.preventDefault();
        var evt = event.originalEvent,
            mx = evt.clientX /* - canvas.offsetLeft */
            ,
            my = evt.clientY /* - canvas.offsetTop */
            ,
            wheel = evt.wheelDelta / 120; //n or -n
        var zoom = (base.ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0));
        var newscale = base.ui.scale * zoom;
        base.ui.origin.x = mx / base.ui.scale + base.ui.origin.x - mx / newscale;
        base.ui.origin.y = my / base.ui.scale + base.ui.origin.y - my / newscale;

        base.ui.stage.setOffset(base.ui.origin.x, base.ui.origin.y);
        base.ui.stage.setScale(newscale);
        base.ui.stage.draw();

        base.ui.scale *= zoom;
    } 
    base.setSelectedElement = function(element) {
        if(base.selectedElement)
        {
            base.selectedElement.shape.setStroke('black'); 
        }
        base.selectedElement=element;
        base.selectedElement.shape.setStroke('red'); 
    }
    base.init();
}
ABC.Canvas.prototype = new ABC.Container();

/////////////////////////////////////////////////////////////////////////////


ABC.Element = function (x,y) {
    var base = this;         

    base.init = function () { 

        base.elements=[];
        base.shape = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: 50,
            height: 50,
            //fill: 'green',
            stroke: 'black',
            strokeWidth: 1, 
        }); 
        base.shape.on('mouseover', base.shape_mouseover );
        base.shape.on('mouseout', base.shape_mouseout );

        base.childgroup = new Kinetic.Group(); 
        base.group = new Kinetic.Group({
            x: x,
            y: y,
            width: 50,
            height: 50,
            draggable: true, 
            layer: true,
        }); 
        //prevent even bubbling so downstream group is selected on drag not upstream group.
        base.group.on('mousedown', base.shape_mousedown );
        base.group.on('dragstart', base.group_dragstart );
        base.group.on('dragend', base.group_dragend );
        //element2.moveToTop();
        base.group.add(base.shape);
        base.group.add(base.childgroup);

        base.group.on('dblclick', base.newElement);
    } 

    ///////////////////////////////////////////////////

    base.shape_mouseover = function (e) { 
        e.cancelBubble = true; 
        //this.setStroke('blue'); 
        base.group.draw();
    }
    base.shape_mouseout = function (e) {
        e.cancelBubble = true;  
        //this.setStroke('black'); 
        base.group.draw();
    }
    base.shape_mousedown =  function(e) {
        canvas.setSelectedElement(base);
        e.cancelBubble = true; 
    }
    base.group_dragstart =  function(e) {
        //e.cancelBubble = true; 
    }
    base.group_dragend =  function(e) {
        //cannot select after drag
        ////
        //base.shape.moveDown();
    }
    base.dragBoundFunc =  function(p,e) { 

        var scale = base.getAbsoluteScale(base.group);

        //hold shif to allign with grid.
        if(e.shiftKey)
        { 
            var gridW=10;
            p.x = Math.round(p.x/gridW / scale.x)*gridW * scale.x;
            p.y = Math.round(p.y/gridW / scale.y)*gridW * scale.y;
        } 

        return base.fitToBound(p,scale,base.parent.shape);
    }
    base.newElement = function (e) { 
        e.cancelBubble = true; 

        // var pos=base.group.getAbsolutePosition();
        // var x=(e.x-pos.x)/canvas.ui.scale;
        // var y=(e.y-pos.y)/canvas.ui.scale;

        // var scale = base.getAbsoluteScale(base.group); 
        // var p = base.fitToBound({x:x,y:y},scale,base.shape);//not working for some reason.
        //writeMessage(messageLayer, 'x: ' + x + ', y: ' + y);
        var element = new ABC.Element(0,0);  

        base.addElement(element); 
                }
    base.addElement = function (element) { 
        base.elements.push(element);
        element.parent=base;

        element.group.setDragBoundFunc(element.dragBoundFunc);
        element.group.setScale(0.5);


            //fit to bounds
        element.fitElementToBound();/////////////////change to use dragboundsfunc
        base.childgroup.add(element.group); 
        canvas.setSelectedElement(element);
    } 
    base.fitToBound =  function(p,scale,shape) { 

        //Fit to bounds of parent shape.
        var boundpos=shape.getAbsolutePosition();  
        var boundsize=shape.getSize();  

        var x1=boundpos.x+boundsize.width*scale.x;
        var y1=boundpos.y+boundsize.height*scale.y;
        return {
            x: p.x<boundpos.x?boundpos.x:(p.x > x1 ? x1 :p.x),
            y: p.y<boundpos.y?boundpos.y:(p.y > y1 ? y1 :p.y)
        }
    }
    base.fitElementToBound =  function() { 

        var p1=base.group.getPosition();
        var scale = base.getAbsoluteScale(base.group);
        var p = base.fitToBound(p1,scale,base.parent.shape);
        base.group.setPosition( p.x, p.y);
    }
    base.getAbsoluteScale =  function(t) {  
        var scale = t.getScale();  
        if(t.parent)
        {
            var scale1 = base.getAbsoluteScale(t.parent);
            return {x:scale.x*scale1.x,y:scale.y*scale1.y};
        }
        return scale;
    }



    base.init();
}
ABC.Element.prototype  = new ABC.Container();

/////////////////////////////////////////////////////////////////////////////

  var messageLayer = new Kinetic.Layer();
  function writeMessage(messageLayer, message) {
    var context = messageLayer.getContext();
    messageLayer.clear();
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
  } 

var canvas = new ABC.Canvas('container');


var element01 = new ABC.Element(0,0);  
canvas.childgroup.add(element01.group);


var element0 = new ABC.Element(10,20);

element01.addElement(element0);


var element1 = new ABC.Element(20,30);  
element0.addElement(element1);


var element2 = new ABC.Element(40,50);  
element1.addElement(element2);

canvas.stage.draw();


  canvas.stage.add(messageLayer);


});

我首先遇到两个问题,如果你双击一个盒子,它会在那个盒子里创建另一个小盒子。唯一的问题是我不能让它在创建时正确地定位在框中。如果您在创建框后找到该框(鼠标滚轮缩小)并尝试拖动它,则它会快速回到父框中。如果它会在创建之前检查新框是否在父框中,如果没有则移动它将会很棒。

第二个问题是当你创建一个新的子框(双击一个框)并在父框中创建两个子框。如果您拖动新的子框,然后选择另一个子框,您将无法再次选择新的子框(它将只选择父框)。这种剂量总会发生,但如果你玩它就应该发生在你身上。如何防止这种情况。

感谢。


越来越近,第一期几乎已经解决了。在启动时和双击时添加新框。唯一的问题是,如果你移动主块,然后双击它不在正确的位置。

第二个问题仍然没有运气。

http://jsfiddle.net/viciouskinid/MYYRa/6/

1 个答案:

答案 0 :(得分:0)

好的解决了。

http://jsfiddle.net/viciouskinid/MYYRa/9/

    var ABC = {};

    /////////////////////////////////////////////////////////////////////////////

    $(function () {

        ABC.Container = function () {
            var base = this;

        }

        /////////////////////////////////////////////////////////////////////////////

        ABC.Canvas = function (containerID) {
            var base = this;

            var $container = $("#" + containerID);
            base.stage = new Kinetic.Stage({
                container: containerID,
                width: $container.width(),
                height: $container.height(),
                //draggable: true,
            });
            //$container.css('height','');

            base.ui = {
                stage: base.stage,
                scale: 1,
                zoomFactor: 1.1,
                origin: {
                    x: 0,
                    y: 0
                }
            };
            base.selectedElement = null;

            base.init = function () {
                $(window).resize(base.resize);
                $(base.stage.content).on('mousewheel', base.zoom);


                base.childgroup = new Kinetic.Group();
                base.layer = new Kinetic.Layer();
                base.layer.add(base.childgroup);
                base.stage.add(base.layer);
            }

            base.resize = function (event) {
                base.stage.width = $container.width();
                base.stage.height = $container.height();
            }
            base.zoom = function (event) {
                event.preventDefault();
                var evt = event.originalEvent,
                    mx = evt.clientX /* - canvas.offsetLeft */
                    ,
                    my = evt.clientY /* - canvas.offsetTop */
                    ,
                    wheel = evt.wheelDelta / 120; //n or -n
                var zoom = (base.ui.zoomFactor - (evt.wheelDelta < 0 ? 0.2 : 0));
                var newscale = base.ui.scale * zoom;
                base.ui.origin.x = mx / base.ui.scale + base.ui.origin.x - mx / newscale;
                base.ui.origin.y = my / base.ui.scale + base.ui.origin.y - my / newscale;

                base.ui.stage.setOffset(base.ui.origin.x, base.ui.origin.y);
                base.ui.stage.setScale(newscale);
                base.ui.stage.draw();

                base.ui.scale *= zoom;
            }
            base.setSelectedElement = function (element) {
                if (base.selectedElement) {
                    base.selectedElement.shape.setStroke('black');
                }
                base.selectedElement = element;
                base.selectedElement.shape.setStroke('red');
            }
            base.init();
        }
        ABC.Canvas.prototype = new ABC.Container();

        /////////////////////////////////////////////////////////////////////////////


        ABC.Element = function (x, y) {
            var base = this;

            base.init = function () {

                base.elements = [];
                base.shape = new Kinetic.Rect({
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 50,
                    //fill: 'green',
                    stroke: 'black',
                    strokeWidth: 1,
                });
                base.shape.on('mouseover', base.shape_mouseover);
                base.shape.on('mouseout', base.shape_mouseout);

                base.childgroup = new Kinetic.Group();
                base.group = new Kinetic.Group({
                    x: x,
                    y: y,
                    width: 50,
                    height: 50,
                    draggable: true,
                    layer: true,
                });
                //prevent even bubbling so downstream group is selected on drag not upstream group.
                base.group.on('mousedown', base.shape_mousedown);
                base.group.on('dragstart', base.group_dragstart);
                base.group.on('dragend', base.group_dragend);
                //element2.moveToTop();
                base.group.add(base.shape);
                base.group.add(base.childgroup);

                base.group.on('dblclick', base.newElement);
            }

            ///////////////////////////////////////////////////

            base.shape_mouseover = function (e) {
                e.cancelBubble = true;
                //this.setStroke('blue'); 
                base.group.draw();
            }
            base.shape_mouseout = function (e) {
                e.cancelBubble = true;
                //this.setStroke('black'); 
                base.group.draw();
            }
            base.shape_mousedown = function (e) {
                canvas.setSelectedElement(base);
                e.cancelBubble = true;
            }
            base.group_dragstart = function (e) {
                //e.cancelBubble = true; 
            }
            base.group_dragend = function (e) {
                //cannot select after drag
                ////
                //base.shape.moveDown();
            }
            base.dragBoundFunc = function (p, e) {

                var scale = base.getAbsoluteScale(base.group);

                //hold shif to allign with grid.
                if (e.shiftKey) {
                    var gridW = 10;
                    p.x = Math.round(p.x / gridW / scale.x) * gridW * scale.x;
                    p.y = Math.round(p.y / gridW / scale.y) * gridW * scale.y;
                }

                return base.fitToBound(p, scale, base.parent.shape);
            }
            base.newElement = function (e) {
                e.cancelBubble = true;

                var pos = base.group.getAbsolutePosition();
                var x = (e.x - pos.x) / canvas.ui.scale;
                var y = (e.y - pos.y) / canvas.ui.scale;
                // var scale = base.getAbsoluteScale(base.group); 
                // var p = base.fitToBound({x:x,y:y},scale,base.shape);//not working for some reason.
                //writeMessage(messageLayer, 'x: ' + x + ', y: ' + y);
                var element = new ABC.Element(x, y);

                base.addElement(element);
            }
            base.addElement = function (element) {
                base.elements.push(element);
                element.parent = base;

                element.group.setDragBoundFunc(element.dragBoundFunc);
                element.group.setScale(0.5);


                //fit to bounds
                element.fitElementToBound(); /////////////////change to use dragboundsfunc
                base.childgroup.add(element.group);
                canvas.setSelectedElement(element);
            }
            base.fitToBound = function (p, scale, shape) {

                //Fit to bounds of parent shape.
                var boundpos = shape.getAbsolutePosition();
                var boundsize = shape.getSize();

                var x1 = boundpos.x + boundsize.width * scale.x;
                var y1 = boundpos.y + boundsize.height * scale.y;
                return {
                    x: p.x < boundpos.x ? boundpos.x : (p.x > x1 ? x1 : p.x),
                    y: p.y < boundpos.y ? boundpos.y : (p.y > y1 ? y1 : p.y)
                }
            }
            base.fitToBound2 = function (p, shape) {

                var scale = base.getAbsoluteScale(base.group);
                var scale1 = base.getAbsoluteScale(shape);
                var p = base.group.getPosition();
                var size = base.group.getSize();

                //Fit to bounds of parent shape.
                var boundpos = shape.getAbsolutePosition();
                var boundsize = shape.getSize();

                var x1 = boundpos.x + (boundsize.width) * scale1.x - size.width * scale.x;
                var y1 = boundpos.y + (boundsize.height) * scale1.y - size.height * scale.y;

                //alert((boundsize.width )*scale1.x +" "+ size.width*scale.x);
                //alert(scale.x +" "+ scale1.x);
                //alert(boundsize.height +" "+ size.height);
                return {
                    x: p.x < boundpos.x ? boundpos.x : (p.x > x1 ? x1 : p.x),
                    y: p.y < boundpos.y ? boundpos.y : (p.y > y1 ? y1 : p.y)
                }
            }
            base.fitElementToBound = function () {

                var p1 = base.fitToBound2(p1, base.parent.shape);

                base.group.setPosition(p1.x, p1.y);
            }
            base.getAbsoluteScale = function (t) {
                var scale = t.getScale();
                if (t.parent) {
                    var scale1 = base.getAbsoluteScale(t.parent);
                    return {
                        x: scale.x * scale1.x,
                        y: scale.y * scale1.y
                    };
                }
                return scale;
            }



            base.init();
        }
        ABC.Element.prototype = new ABC.Container();

        /////////////////////////////////////////////////////////////////////////////

        var messageLayer = new Kinetic.Layer();

        function writeMessage(messageLayer, message) {
            var context = messageLayer.getContext();
            messageLayer.clear();
            context.font = '18pt Calibri';
            context.fillStyle = 'black';
            context.fillText(message, 10, 25);
        }

        var canvas = new ABC.Canvas('container');


        var element01 = new ABC.Element(0, 0);
        canvas.childgroup.add(element01.group);


        var element0 = new ABC.Element(100, 200);

        element01.addElement(element0);


        var element1 = new ABC.Element(200, 300);
        element0.addElement(element1);


        var element2 = new ABC.Element(400, 800);
        element1.addElement(element2);

        canvas.stage.draw();


        canvas.stage.add(messageLayer);


    });