Object Modelling

by Bladetrick

HTML

<div id="canvas"></div>
<a href="#" id="btnEdit" class="btn">Edit Model</a>
<a href="#" id="btnCreate" class="btn">Create Model</a>
<a href="#" id="btnExport" class="btn">Load Model</a>
<a href="#" id="btnExport" class="btn">Export Model</a>
<a href="#" id="btnClear" class="btn">Clear Screen</a>

CSS

.btn {
    background: white;
    text-align: center;
    display: block;
    width: 100px;
    
    color: black;
    border: 1px solid black;
    outline: 0;
    text-decoration: none;   
    box-shadow: 0px 3px 5px #000;
}

.active{ background: green; color: white }

JavaScript

var canvas, ctx;

(function() {    
    function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');        
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        return canvas;
    }

    function init(container, width, height, fillColor) {
        canvas = createCanvas(container, width, height);
        ctx = canvas.context;
        ctx.clearTo = function(fillColor) {
            ctx.fillStyle = fillColor;
            ctx.fillRect(0, 0, width, height);
        };
        ctx.clearTo(fillColor || "#ddd");
    }

    var container = document.getElementById('canvas');
    init(container, 700, 400, '#000');

})();

function dpoint(_x, _y){
    this.x = _x;
    this.y = _y;    
}

function dline(pt1, pt2){ 
    this.line = [pt1, pt2];           
}

function dobj(){
    this.dpoints = [];
    this.dlines = [];
    this.center = [];
    
    this.Create = function() { };    
    this.CalculateCenter = function() {      
        var x = ((this.dlines[0].line[0].x - this.dlines[1].line[0].x)/2) + this.dlines[0].line[0].x;
        var y = ((this.dlines[0].line[0].y - this.dlines[1].line[0].y)/2) + this.dlines[1].line[0].y;  
        
        return [x, y];
    };
    this.Rotate = function(theta) { 
        var radians = (Math.PI / 180) * theta;
        var cos = Math.cos(radians);
        var sin = Math.sin(radians);

        var centerpoint = this.CalculateCenter();          
        var cx = centerpoint[0];
        var cy = centerpoint[1];
        
        this.dpoints.forEach(function(point){      
            point.x = (cos * (point.x - cx)) - (sin * (point.y - cy)) + cx;
            point.y = (sin * (point.x - cx)) + (cos * (point.y - cy)) + cy;
        })

        this.Invalidate();    
    };
    this.Translate = function(x,y) {
       ...