How to inherit common properties in javascript oops using same prototype? -
here full code: <!doctype html> <html> <head> <meta charset="utf-8"> <script src="d:\jquery-1.11.3.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/iamphill/bootstrap-offcanvas/master/dist/css/bootstrap.offcanvas.min.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>oops2</title> <link rel="stylesheet" href="style.css"> <style> .navheight { height: 198px; !important } html, body { width: 100%; height: 100%; } #paint { overflow: scroll; width: 100%; height: 100%; !important } #sketch { border: 10px dashed gray; height: 100%; position: relative; } #tmp_canvas { position: absolute; left: 0px; right: 0; bottom: 0; top: 0; cursor: crosshair; width: 100%; height: 100%; !important } </style> </head> <body class="body-offcanvas" onload="init()"> <header class="clearfix"> <div class="row navigation-bar"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas"> <span class="glyphicon glyphicon-plus"></span> </button> <nav class="navbar navbar-inverse navbar-fixed-bottom navbar-offcanvas navbar-offcanvas-touch navheight" role="navigation" id="js-bootstrap-offcanvas"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li> <b style="color:grey;"> circle</b> <br> <button onclick="circle()" class="btn btn-primary"> <span class="glyphicon glyphicon-copyright-mark"></span> </button> </li> <li><b style="color:grey;">rectangle</b> <br> <button onclick="rectangle()" class="btn btn-info"> <span class="glyphicon glyphicon-stop"></span> </button> </li> <li><b style="color:grey;"> pencil</b> <br> <button onclick="pen()" class="btn btn-success"> <span class="glyphicon glyphicon-pencil"></span> </button> </li> <li><b style="color:grey;"> save</b> <br> <button onclick="onsave()" class="btn btn-info"> <span class="glyphicon glyphicon-save"></span> </button> </li> <li><b style="color:grey;"> clear</b> <br> <button id="clear" onclick="erase()" class="btn btn-warning"> <span class="glyphicon glyphicon-remove"></span> </button> </li> </ul> <label for="pencil" style="color:grey;">pencil</label> <input id="pencil" type="radio" name="tool" value="pencil" checked="checked"> <label for="eraser" style="color:grey;">eraser</label> <input id="eraser" type="radio" name="tool" value="eraser"> <br> <br> <h3 style="color:grey;">choose colours</h3> <div id="blue" onclick="color(this)"></div> <div id="orange" onclick="color(this)"></div> <div id="black" onclick="color(this)"></div> <div id="green" onclick="color(this)"></div> <label style="color:grey;">select file <span class="glyphicon glyphicon-file"></span>:</label> <input type="file" id="tmp_canvas" name="imageloader" style="position:relative;top=3%;right:30%;" class="img-responsive" /> </div> </div> </nav> </div> </header> <div id="sketch"> <canvas id="paint"></canvas> </div> <script> var canvas, ctx, w, h; var selectedcolor = "black"; var width, height; canvas = document.queryselector('#paint'); ctx = canvas.getcontext('2d'); var sketch = document.queryselector('#sketch'); var sketch_style = getcomputedstyle(sketch); canvas.width = parseint(sketch_style.getpropertyvalue('width')); canvas.height = parseint(sketch_style.getpropertyvalue('height')); // creating tmp canvas var tmp_canvas = document.createelement('canvas'); var tmp_ctx = tmp_canvas.getcontext('2d'); tmp_canvas.id = 'tmp_canvas'; tmp_canvas.width = canvas.width; tmp_canvas.height = canvas.height; var mouse = { x : 0, y : 0 } ; var start_mouse = { x : 0, y : 0 } ; var last_mouse = { x : 0, y : 0 } ; var imageloader = document.getelementbyid('tmp_canvas'); imageloader.addeventlistener('change', handleimage, false); // load image function handleimage(e) { var reader = new filereader(); reader.onload = function (event) { var img = new image(); img.onload = function () { img.width = canvas.width; img.height = canvas.height; ctx.drawimage(img, 0, 0); } img.src = event.target.result; } reader.readasdataurl(e.target.files[0]); } // save image function onsave() { var img = canvas.todataurl("image/png"); document.write('<img src="' + img + '"/>'); } function init() { canvas = document.getelementbyid('paint'); ctx = canvas.getcontext("2d"); w = canvas.width; h = canvas.height; } // select color function color(obj) { switch (obj.id) { case "blue" : selectedcolor = "blue"; break; case "orange" : selectedcolor = "orange"; break; case "black" : selectedcolor = "black"; break; case "green" : selectedcolor = "green"; break; } } function erase() { var m = confirm("want clear"); if (m) { ctx.clearrect(0, 0, w, h); } } //here code tat same among rectangle , circle want inherit function shape(linewidth , linejoin , linecap , strokestyle ,fillstyle ) { this.linewidth = linewidth ; this.linejoin = linejoin ; this.linecap = linecap ; this.strokestyle = strokestyle ; this.fillstyle = fillstyle ; }
// rectangle function rectangle() { sketch.appendchild(tmp_canvas); /* mouse capturing work */ tmp_canvas.addeventlistener('mousemove', function (e) { mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; }, false); tmp_canvas.addeventlistener('mousedown', function (e) { tmp_canvas.addeventlistener('mousemove', onpaint1, false); mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; start_mouse.x = mouse.x; start_mouse.y = mouse.y; onpaint1(); }, false); tmp_canvas.addeventlistener('mouseup', function () { tmp_canvas.removeeventlistener('mousemove', onpaint1, false); // writing down real canvas ctx.drawimage(tmp_canvas, 0, 0); document.getelementbyid('clear').addeventlistener('click', function () { tmp_ctx.clearrect(0, 0, tmp_canvas.width, tmp_canvas.height); ctx.clearrect(0, 0, canvas.width, canvas.heigh); }, false); }, false); var onpaint1 = function () { tmp_ctx.clearrect(0, 0, tmp_canvas.width, tmp_canvas.height); var x = math.min(mouse.x, start_mouse.x); var y = math.min(mouse.y, start_mouse.y); var width = math.abs(mouse.x - start_mouse.x); var height = math.abs(mouse.y - start_mouse.y); tmp_ctx.strokerect(x, y, width, height); }; } //this line of code have added inherit rectangle.prototype= new shape(8, "round","round",selectedcolor,selectedcolor);
// circle function circle() { sketch.appendchild(tmp_canvas); /* mouse capturing work */ tmp_canvas.addeventlistener('mousemove', function (e) { mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; }, false); tmp_canvas.addeventlistener('mousedown', function (e) { tmp_canvas.addeventlistener('mousemove', onpaint, false); mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; start_mouse.x = mouse.x; start_mouse.y = mouse.y; onpaint(); }, false); tmp_canvas.addeventlistener('mouseup', function () { tmp_canvas.removeeventlistener('mousemove', onpaint, false); // writing down real canvas ctx.drawimage(tmp_canvas, 0, 0); document.getelementbyid('clear').addeventlistener('click', function () { tmp_ctx.arc(mouse.x, mouse.y, tmp_ctx.linewidth / 2, 0, math.pi * 2, ! 0); tmp_ctx.clearrect(0, 0, tmp_canvas.width, tmp_canvas.height); ctx.clearrect(0, 0, canvas.width, canvas.heigh); }, false); }, false); var onpaint = function () { tmp_ctx.clearrect(0, 0, tmp_canvas.width, tmp_canvas.height); var x = (mouse.x + start_mouse.x) / 2; var y = (mouse.y + start_mouse.y) / 2; var radius = math.max(math.abs(mouse.x - start_mouse.x), math.abs(mouse.y - start_mouse.y)) / 2; tmp_ctx.beginpath(); tmp_ctx.arc(x, y, radius, 0, math.pi * 2, false); tmp_ctx.stroke(); tmp_ctx.closepath(); }; } circle.prototype= new shape(8, "round", "round",selectedcolor,selectedcolor); (function () { // determine tool var tool = 'pencil'; document.queryselector('#pencil').onchange = function () { if (this.checked) tool = 'pencil'; // show tmp canvas tmp_canvas.style.display = 'block'; } ; document.queryselector('#eraser').onchange = function () { if (this.checked) tool = 'eraser'; // hide tmp canvas tmp_canvas.style.display = 'none'; } ; sketch.appendchild(tmp_canvas); // pencil points var ppts = []; /* mouse capturing work */ tmp_canvas.addeventlistener('mousemove', function (e) { mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; } , false); canvas.addeventlistener('mousemove', function (e) { mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; } , false); /* drawing on paint app */ tmp_ctx.linewidth = 5; tmp_ctx.linejoin = 'round'; tmp_ctx.linecap = 'round'; tmp_ctx.strokestyle = selectedcolor; tmp_ctx.fillstyle = selectedcolor; tmp_canvas.addeventlistener('mousedown', function (e) { tmp_canvas.addeventlistener('mousemove', onpaint, false); mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; ppts.push( { x : mouse.x, y : mouse.y } ); onpaint(); } , false); tmp_canvas.addeventlistener('mouseup', function () { tmp_canvas.removeeventlistener('mousemove', onpaint, false); ctx.globalcompositeoperation = 'source-over'; // writing down real canvas ctx.drawimage(tmp_canvas, 0, 0); // clearing tmp canvas tmp_ctx.clearrect(0, 0, tmp_canvas.width, tmp_canvas.height); // emptying pencil points ppts = []; } , false); var onpaint = function () { // saving points in array ppts.push( { x : mouse.x, y : mouse.y } ); if (ppts.length < 3) { var b = ppts[0]; tmp_ctx.beginpath(); // ctx.moveto(b.x, b.y); // ctx.lineto(b.x + 50, b.y + 50); tmp_ctx.arc(b.x, b.y, tmp_ctx.linewidth / 2, 0, math.pi * 2, ! 0); tmp_ctx.fill(); tmp_ctx.closepath(); return; } // tmp canvas cleared before drawing. tmp_ctx.clearrect(0, 0, tmp_canvas.width, tmp_canvas.height); tmp_ctx.beginpath(); tmp_ctx.moveto(ppts[0].x, ppts[0].y); (var = 1; < ppts.length - 2; ++ ) { var c = (ppts[i].x + ppts[i + 1].x) / 2; var d = (ppts[i].y + ppts[i + 1].y) / 2; tmp_ctx.quadraticcurveto(ppts[i].x, ppts[i].y, c, d); } // last 2 points tmp_ctx.quadraticcurveto( ppts[i].x, ppts[i].y, ppts[i + 1].x, ppts[i + 1].y ); tmp_ctx.stroke(); }; canvas.addeventlistener('mousedown', function (e) { canvas.addeventlistener('mousemove', onerase, false); mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; ppts.push( { x : mouse.x, y : mouse.y } ); onerase(); } , false); canvas.addeventlistener('mouseup', function () { canvas.removeeventlistener('mousemove', onerase, false); // emptying pencil points ppts = []; } , false); var onerase = function () { // saving points in array ppts.push( { x : mouse.x, y : mouse.y } ); ctx.globalcompositeoperation = 'destination-out'; ctx.fillstyle = 'rgba(0,0,0,1)'; ctx.strokestyle = 'rgba(0,0,0,1)'; ctx.linewidth = 5; if (ppts.length < 3) { var b = ppts[0]; ctx.beginpath(); ctx.arc(b.x, b.y, ctx.linewidth / 2, 0, math.pi * 2, ! 0); ctx.fill(); ctx.closepath(); return; } ctx.beginpath(); ctx.moveto(ppts[0].x, ppts[0].y); (var = 1; < ppts.length - 2; ++ ) { var c = (ppts[i].x + ppts[i + 1].x) / 2; var d = (ppts[i].y + ppts[i + 1].y) / 2; ctx.quadraticcurveto(ppts[i].x, ppts[i].y, c, d); } // last 2 points ctx.quadraticcurveto( ppts[i].x, ppts[i].y, ppts[i + 1].x, ppts[i + 1].y ); ctx.stroke(); } ; } )(); // pen tool function pen() { sketch.appendchild(tmp_canvas); // pencil points var ppts = []; /* mouse capturing work */ tmp_canvas.addeventlistener('mousemove', function (e) { mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; } , false); tmp_canvas.addeventlistener('mousedown', function (e) { tmp_canvas.addeventlistener('mousemove', onpaint, false); mouse.x = typeof e.offsetx !== 'undefined' ? e.offsetx : e.layerx; mouse.y = typeof e.offsety !== 'undefined' ? e.offsety : e.layery; ppts.push( { x : mouse.x, y : mouse.y } ); onpaint(); } , false); tmp_canvas.addeventlistener('mouseup', function () { tmp_canvas.removeeventlistener('mousemove', onpaint, false); // writing down real canvas ctx.drawimage(tmp_canvas, 0, 0); // clearing tmp canvas tmp_ctx.clearrect(0, 0, tmp_canvas.width, tmp_canvas.height); // emptying pencil points ppts = []; } , false); var onpaint = function () { // saving points in array ppts.push( { x : mouse.x, y : mouse.y } ); if (ppts.length < 3) { var b = ppts[0]; tmp_ctx.beginpath(); tmp_ctx.arc(b.x, b.y, tmp_ctx.linewidth / 2, 0, math.pi * 2, ! 0); tmp_ctx.fill(); tmp_ctx.closepath(); return; } // tmp canvas cleared before drawing. tmp_ctx.clearrect(0, 0, tmp_canvas.width, tmp_canvas.height); tmp_ctx.beginpath(); tmp_ctx.moveto(ppts[0].x, ppts[0].y); (var = 1; < ppts.length - 2; ++ ) { var c = (ppts[i].x + ppts[i + 1].x) / 2; var d = (ppts[i].y + ppts[i + 1].y) / 2; tmp_ctx.quadraticcurveto(ppts[i].x, ppts[i].y, c, d); } // last 2 points tmp_ctx.quadraticcurveto( ppts[i].x, ppts[i].y, ppts[i + 1].x, ppts[i + 1].y ); tmp_ctx.stroke(); }; } pen.prototype=new shape(8,"round","round",selectedcolor,selectedcolor); </script> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/iamphill/bootstrap-offcanvas/master/dist/js/bootstrap.offcanvas.min.js"></script> </body> </html>
function shape(linewidth , linejoin , linecap , strokestyle ,fillstyle ) { this.linewidth = linewidth ; this.linejoin = linejoin ; this.linecap = linecap ; this.strokestyle = strokestyle ; this.fillstyle = fillstyle ; } these called js prototypes.you can use them as-->
var circle= new shape("5", "round", "round",selectedcolor,selectedcolor); var rectangle= new shape("8", "round", "round",selectedcolor,selectedcolor); then can access property wish circle.linewidth , on
Comments
Post a Comment