Создавайте динамические прямоугольники/боксы с помощью EaselJs или KineticJs.

Привет, я хочу сделать редактор плана этажа (что-то вроде MsPaint) с использованием JavaScript. Я выбрал EaselJS или KinetiJS в качестве предпочитаемых библиотек.

Я хотел бы знать, как создать динамическую прямоугольную рамку/линию с помощью этих библиотек. Я намереваюсь нарисовать прямоугольник, щелкнув мышью и перетащив его (пока кнопка мыши остается нажатой). Таким образом, размер прямоугольника будет зависеть от того, как далеко перетаскивается мышь.

Любая помощь будет оценена. Если кто-то считает, что любая другая библиотека, такая как fabrisJs или paperJs, будет лучшей альтернативой, то я также открыт для решений в этих библиотеках.


javascript paperjs fabricjs easeljs kineticjs
person user1517108    schedule 06.12.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо... методом проб и ошибок и множества поисковых запросов и повторного использования сетевого кода я получил ответ для KineticJs.

Вот полное решение:

http://jsfiddle.net/sandeepy02/8kGVD/

<html>
    <head>
        <script>
            window.onload = function() {
                layer = new Kinetic.Layer();
                stage = new Kinetic.Stage({
                    container: "container",
                    width: 320,
                    height: 320
                });

                background = new Kinetic.Rect({
                    x: 0, 
                    y: 0, 
                    width: stage.getWidth(),
                    height: stage.getHeight(),
                    fill: "white"
                });


                layer.add(background);
                stage.add(layer);

                moving = false;

                stage.on("mousedown", function(){
                    if (moving){
                        moving = false;layer.draw();
                    } else {
                        var mousePos = stage.getMousePosition();
                        rect= new Kinetic.Rect({
        x: 22,
        y: 7,
        width: 0,
        height: 0,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
                        });
                        layer.add(rect);
                        //start point and end point are the same
                        rect.setX(mousePos.x);
                        rect.setY(mousePos.y);
                        rect.setWidth(0);
                        rect.setHeight(0);


                        moving = true;    
                        layer.drawScene();            
                    }

                });

                stage.on("mousemove", function(){
                    if (moving) {
                        var mousePos = stage.getMousePosition();
                        var x = mousePos.x;
                        var y = mousePos.y;
                        rect.setWidth(mousePos.x-rect.getX());
                        rect.setHeight(mousePos.y-rect.getY());
                        moving = true;
                        layer.drawScene();
                    }
                });

                stage.on("mouseup", function(){
                    moving = false; 
                });

            };
        </script>
    </head>
    <body>
        <div id="container" ></div>
    </body>
</html>
​
person user1517108    schedule 06.12.2012
comment
предложение, если вы хотите изменить размер прямоугольника после этого, используйте маленький кружок и отобразите его в углу, где находится мышь, затем используйте функцию перетаскивания круга, чтобы изменить размер прямоугольника. - person Jonke; 06.12.2012