02. Classical OOP in JavaScript

01.Create a module for drawing shapes using Canvas.
Implement the following shapes:
– Rect, by given position (X, Y) and size (Width, Height)
– Circle, by given center position (X, Y) and radius (R)
– Line, by given from (X1, Y1) and to (X2, Y2) positions

Used libraries: RequireJS, KineticJS

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script src="scripts/libs/kinetic-v5.1.0.min.js"></script>
    <script type="text/javascript" src="scripts/libs/require.js" data-main="scripts/app"></script>
</head>
<body>
    <div id="canvas-container"></div>
    <div id="select">
        <label for="shapes">Selected shape: </label>
        <select id="shapes">
            <option selected>---------------</option>
            <option>Rectangle</option>
            <option>Line</option>
            <option>Circle</option>
        </select>
        <br/>

        <label for="stroke-color">Stroke color: </label>
        <input type="color" id="stroke-color"/>
        <br/>

        <label for="fill-color">Fill color: </label>
        <input type="color" id="fill-color"/>
        <br/>

        <label for="stroke-width">Stroke width:</label>
        <input type="range" min="1" max="5" step="1" value="1" id="stroke-width"/>
    </div>
</body>
</html>

css/style.css

#canvas-container {
    width: 800px;
    height: 500px;
    border: 1px solid black;
    border-radius: 10px;
    margin-left: 280px;
    position: absolute;
}

#select {
    width: 250px;
    height: 200px;
    border: 1px solid black;
    border-radius: 10px;
}

select, label {
    margin-left: 10px;
}

#stroke-color {
    margin-left: 26px;
}

#fill-color {
    margin-left: 45px;
}

#stroke-width {
    margin-left: 22px;
}

select, #stroke-color, #fill-color, #stroke-width {
    width: 90px;
    margin-top: 20px;
}

scripts/app.js

(function() {
    require(['Controllers/Drawer', 'Controllers/Events'], function (Drawer, Events) {

    });
}());

scripts/Navigation/GlobalConstants.js

define(function() {
    return {
        RECTANGLE: 'Rectangle',
        CIRCLE: 'Circle',
        LINE: 'Line'
    };
});

scripts/Navigation/GlobalVariables.js

define(function() {
    return {
        canvasContainer: document.getElementById('canvas-container'),
        shapes: document.getElementById('shapes'),
        selectedStrokeColor: document.getElementById('stroke-color'),
        selectedFillColor: document.getElementById('fill-color'),
        selectedStrokeWidth: document.getElementById('stroke-width'),
        selectedShape: '',
        x: '',
        y:'',
        width: '',
        height: '',
        x2: '',
        y2: '',
        radius: ''
    };
});

scripts/Controllers/Drawer.js

define(['Navigation/GlobalVariables', 'Navigation/GlobalConstants', 'MainModules/Rectangle', 'MainModules/Line',
    'MainModules/Circle'], function(GlobalVariables, GlobalConstants, Rectangle, Line, Circle) {

    function drawShape() {
        var stage = initializeStage();
        var layer = new Kinetic.Layer();
        var shape;

       if(GlobalVariables.selectedShape === GlobalConstants.RECTANGLE || GlobalVariables.selectedShape === GlobalConstants.LINE ||
           GlobalVariables.selectedShape === GlobalConstants.CIRCLE) {
           switch (GlobalVariables.selectedShape) {
               case GlobalConstants.RECTANGLE:
                   shape = new Rectangle(GlobalVariables.x, GlobalVariables.y, GlobalVariables.width, GlobalVariables.height,
                       GlobalVariables.selectedStrokeColor.value, GlobalVariables.selectedFillColor.value, GlobalVariables.selectedStrokeWidth.value);
                   break;
               case GlobalConstants.LINE:
                   shape = new Line(GlobalVariables.x, GlobalVariables.y, GlobalVariables.x2, GlobalVariables.y2,
                       GlobalVariables.selectedStrokeColor.value, GlobalVariables.selectedStrokeWidth.value);
                   break;
               case GlobalConstants.CIRCLE:
                   shape = new Circle(GlobalVariables.x, GlobalVariables.y, GlobalVariables.radius ,
                       GlobalVariables.selectedStrokeColor.value, GlobalVariables.selectedFillColor.value, GlobalVariables.selectedStrokeWidth.value);
                   break;
               default: alert('INVALID SHAPE!!!');
                   break;
           }

           layer.add(shape.draw());
           stage.add(layer);
       }
    }

    function initializeStage() {
        var stage = new Kinetic.Stage({
            container: 'canvas-container',
            width: 800,
            height: 500
        });

        return stage;
    }

    return {
        draw: drawShape
    };
});

scripts/Controllers/Events.js

define(['Navigation/GlobalVariables', 'Navigation/GlobalConstants', 'Controllers/Drawer'], function(GlobalVariables, GlobalConstants, Drawer) {
    var mouseDown = false;

    GlobalVariables.shapes.addEventListener('change', function() {
        GlobalVariables.selectedShape = getSelectedShape();
    }, false);

    GlobalVariables.selectedStrokeColor.addEventListener('change', function() {
        GlobalVariables.selectedStrokeColor = document.getElementById('stroke-color');

    }, false);

    GlobalVariables.selectedFillColor.addEventListener('change', function() {
        GlobalVariables.selectedFillColor = document.getElementById('fill-color');
    }, false);

    GlobalVariables.selectedStrokeColor.addEventListener('change', function() {
        GlobalVariables.selectedStrokeWidth = document.getElementById('stroke-width');
    }, false);

    GlobalVariables.canvasContainer.addEventListener('mousedown', function(event) {
        mouseDown = true;
        GlobalVariables.x = event.pageX - this.offsetLeft;
        GlobalVariables.y = event.pageY - this.offsetTop;

    },false);

    GlobalVariables.canvasContainer.addEventListener('mousemove', function(event) {
        if(mouseDown) {
            if(GlobalVariables.selectedShape === GlobalConstants.RECTANGLE) {
                GlobalVariables.width = (event.pageX - this.offsetLeft) - GlobalVariables.x;
                GlobalVariables.height = (event.pageY - this.offsetTop) - GlobalVariables.y;
            }
            else if(GlobalVariables.selectedShape === GlobalConstants.LINE) {
                GlobalVariables.x2 = event.pageX - this.offsetLeft;
                GlobalVariables.y2 = event.pageY - this.offsetTop;
            }
            else if(GlobalVariables.selectedShape === GlobalConstants.CIRCLE) {
                var mouseX = event.pageX - this.offsetLeft - GlobalVariables.x;
                var mouseY = event.pageY - this.offsetTop - GlobalVariables.y;
                GlobalVariables.radius = Math.sqrt(mouseX * mouseX + mouseY * mouseY);
            }

            Drawer.draw();
        }
    }, false);

    GlobalVariables.canvasContainer.addEventListener('mouseup', function() {
        mouseDown = false;
    }, false);

    function getSelectedShape() {
        for (var i = 0; i < GlobalVariables.shapes.innerHTML.length; i++) {
            if(GlobalVariables.shapes[i].selected) {
                return GlobalVariables.shapes[i].value;
            }
        }
    }
});

scripts/MainModules/Circle.js

define(function () {
    var Circle = (function () {
        function Circle(x, y, radius, strokeColor, fillColor, strokeWidth) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.strokeColor = strokeColor;
            this.fillColor = fillColor;
            this.strokeWidth = strokeWidth;
        }

        Circle.prototype.getX = function () {
            return this.x;
        };

        Circle.prototype.getY = function () {
            return this.y;
        };

        Circle.prototype.getRadius = function () {
            return this.radius;
        };

        Circle.prototype.getStrokeColor = function() {
            return this.strokeColor;
        };

        Circle.prototype.getFillColor = function() {
            return this.fillColor;
        };

        Circle.prototype.getStrokeWidth = function() {
            return this.strokeWidth;
        };

            Circle.prototype.draw = function () {
            var circle = new Kinetic.Circle({
                x: this.x,
                y: this.y,
                radius: this.radius,
                stroke: this.strokeColor,
                fill: this.fillColor,
                strokeWidth: this.strokeWidth
            });

            return circle;
        };

        return Circle;
    }());

    return Circle;
});

scripts/MainModules/Line.js

define(function () {
    var Line = (function () {
        function Line(x1, y1, x2, y2, strokeColor, strokeWidth) {
            this.x1 = x1;
            this.y1 = y1;
            this.x2 = x2;
            this.y2 = y2;
            this.strokeColor = strokeColor;
            this.strokeWidth = strokeWidth;
        }

        Line.prototype.getX1 = function () {
            return this.x1;
        };

        Line.prototype.getY1 = function () {
            return this.y1;
        };

        Line.prototype.getX2 = function () {
            return this.x2;
        };

        Line.prototype.getY2 = function () {
            return this.y2;
        };

        Line.prototype.getStrokeColor = function() {
            return this.strokeColor;
        };

        Line.prototype.getStrokeWidth = function() {
            return this.strokeWidth;
        };

        Line.prototype.draw = function () {
            var line = new Kinetic.Line({
                points: [this.x1, this.y1, this.x2, this.y2],
                stroke: this.strokeColor,
                strokeWidth: this.strokeWidth
            });

            return line;
        };

        return Line;
    }());

    return Line;
});

scripts/MainModules/Rectangle.js

define(function() {
    var Rectangle = (function() {

        function Rectangle(x, y, width, height, strokeColor, fillColor, strokeWidth) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.strokeColor = strokeColor;
            this.fillColor = fillColor;
            this.strokeWidth = strokeWidth;
        }

        Rectangle.prototype.getX = function() {
            return this.x;
        };

        Rectangle.prototype.getY = function() {
            return this.y;
        };

        Rectangle.prototype.getWidth = function() {
            return this.width;
        };

        Rectangle.prototype.getHeight = function() {
            return this.height;
        };

        Rectangle.prototype.getStrokeColor = function() {
            return this.strokeColor;
        };

        Rectangle.prototype.getFillColor = function() {
            return this.fillColor;
        };

        Rectangle.prototype.getStrokeWidth = function() {
            return this.strokeWidth;
        };

        Rectangle.prototype.draw = function() {
            var rect = new Kinetic.Rect({
                x: this.x,
                y: this.y,
                width: this.width,
                height: this.height,
                stroke: this.strokeColor,
                fill: this.fillColor,
                strokeWidth: this.strokeWidth
            });

            return rect;
        };

       return Rectangle;
    }());

    return Rectangle;
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s