Приложения

ПРИЛОЖЕНИЕ А

Файл: manifest.json

{

"name": "PaintPad",

"description": "Расширение для создания заметок в браузере",

"version": "0.1",

"manifest_version":2,

"icons":

{

"128": "128.png"

},

"browser_action":

{

"default_title": "PaintPad",

"default_icon": "128.png",

"default_popup": "popup.html"

}

}

ПРИЛОЖЕНИЕ Б

Файл: main.js

function Painter(ctx) {
 this.ctx = ctx;
 this.radius = 0;
 this.width = 0;
 this.height = 0;
 this.color = "#000";
 this.x = undefined;
 this.y = undefined;
 this.overlay = null;
 this.preview = false;
 this.painting = false;
}

Painter.prototype = {
 drawRect: function() {
 this.ctx.fillStyle = this.color;
 this.ctx.fillRect(this.x, this.y, this.width, this.height);
 },
 previewRect: function() {
 this.clearPreview();
 this.overlay.ctx.strokeRect(this.x, this.y, this.width, this.height);
 this.preview = true;
 },
 clearPreview: function() {
 if (this.preview) {
 this.overlay.ctx.clearRect(0, 0, this.overlay.width, this.overlay.height);
 this.preview = false;
 }
 },
 drawCircle: function() {
 this.ctx.fillStyle = this.color;
 this.ctx.beginPath();
 this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
 this.ctx.fill();
 },
 line: function(x, y) {
 this.ctx.strokeStyle = this.color;
 this.ctx.lineWidth = this.radius;
 this.ctx.lineCap = "round";
 if (this.x == undefined || this.y == undefined) {
 this.x = x;
 this.y = y;
 }

 this.ctx.beginPath();
 this.ctx.moveTo(this.x, this.y);
 this.ctx.lineTo(x, y);
 this.ctx.stroke();

 this.x = x;
 this.y = y;
 },
 move: function(x, y) {
 this.x = x;
 this.y = y;
 },
 start: function() {
 this.painting = true;
 },
 stop: function() {
 this.clearPreview();
 this.painting = false;
 this.x = undefined;
 this.y = undefined;
 },
}

function Caint(canvas) {
 var ctx = canvas.getContext("2d");
 var form = document.createElement('form');
 var overlay = canvas.cloneNode();

 var backgroundColor = "white";
 var foregroundColor = "black";

 var painter = new Painter(ctx);
 painter.radius = 3;
 painter.color = foregroundColor;

 var erasingPreview = false;
 var eraser = new Painter(ctx)
 eraser.width = 10;
 eraser.height = 10;
 eraser.color = backgroundColor;
 eraser.overlay = overlay;

 function cancel(e) {
 e.preventDefault();
 return false;
 }
 
function clearCanvas() {
 context.clearRect(640, 480, canvas.width, canvas.height);
 }
 
 this.upListener = function(e) {
 eraser.stop();
 painter.stop();
 }

 this.downListener = function(e) {
 switch(e.button) {
 case 0:
 painter.color = form.painterColor.value;
 painter.radius = form.painterRadius.value;
 painter.start();
 break;
 case 2:
 eraser.color = form.eraserColor.value;
 eraser.width = form.eraserWidth.value;
 eraser.height = form.eraserHeight.value;
 eraser.start();
 break;
 }
 this.draw(e);

 return false;
 }.bind(this);


 this.draw = function(e) {
 var x = e.pageX;
 var y = e.pageY;

 /*
 if (e.pageX || e.pageY) {
 x = e.pageX;
 y = e.pageY;
 } else {
 x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
 y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
 }
 */

 x -= canvas.offsetLeft;
 y -= canvas.offsetTop;

 if (painter.painting) {
 painter.line(x, y);
 } else if (eraser.painting) {
 eraser.move(x - eraser.width / 2, y - eraser.height / 2);
 eraser.previewRect();
 eraser.drawRect();
 }
 }

 this.moveListener = function(e) {
 this.draw(e);
 }.bind(this);

 form.addInput = function(name, value, label) {
 var labelKey = name + "Label";
 form[labelKey] = document.createElement('label');
 form[labelKey].textContent = label;
 form[labelKey].style.color = "white";
 form[labelKey].style.fontFamily = "Tahoma";
 form[labelKey].style.fontSize = "14px";
 form[labelKey].style.display = "block";

 form[name] = document.createElement('input');
 form[name].value = value;
 form[name].style.position = "right";
 form[name].style.size="5em";

 form[labelKey].appendChild(form[name]);
 form.appendChild(form[labelKey]);
 }
 

 function onResize() {
 overlay.style.top = canvas.offsetTop;
 overlay.style.left = canvas.offsetLeft;

 form.style.top = canvas.offsetTop;
 form.style.left = canvas.offsetLeft + canvas.width + 10;
 }

 /* * * * */
 canvas.style.backgroundColor = backgroundColor;
 canvas.style.margin = "auto";
 canvas.style.display = "block";
 canvas.style.cursor = "default";

 /* * * * */
 canvas.addEventListener("mousedown", this.downListener);
 document.addEventListener("mouseup", this.upListener);
 canvas.addEventListener("mousemove", this.moveListener);
 canvas.addEventListener("contextmenu", cancel);
 document.addEventListener("selectstart", cancel);
 window.addEventListener("resize", onResize);

 /* * * * */
 overlay.style.backgroundColor = "argb";
 overlay.style.position = "absolute";
 overlay.style.pointerEvents = "none";
 overlay.ctx = overlay.getContext("2d");


 /* * * * */
 form.style.position = "absolute";

 form.addInput("painterColor", painter.color, "Цвет кисти");
 form.addInput("painterRadius", painter.radius, "Радиус кисти");

 form.addInput("eraserColor", eraser.color, "Цвет ластика");
 form.addInput("eraserWidth", eraser.width, "Ширина ластика");
 form.addInput("eraserHeight", eraser.height, "Высота ластика");
 

 /* * * * */
 onResize();
 document.body.appendChild(overlay);
 document.body.appendChild(form);
}

var canvas = document.getElementById('canvas'),
 ctx = canvas.getContext('2d');
 canvas.width = 640;
 canvas.height = 480;
 /*Очистка*/ 
 function clearCanvas() { 
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 }
 /*Сохранение*/
 function saveCanvas() {
 window.open(canvas.toDataURL("image/png"),"mywindow");
 }
 
new Caint(document.getElementById("canvas"));



ПРИЛОЖЕНИЕ В

Файл: style.css

.buttons {

float: right;

margin:2px 0px 0px 0px;

font-family: 'Tahoma';

font-size: 14px;

font-weight: 100;

text-align: auto;

padding: 5px;

margin-bottom: 0px;

margin-right: 0px;

border: 1px groove rgba(255, 255, 255, 0.2);

border-radius: 5px;

background-color: rgba(255, 255, 255, 0.1);

}

.body {

background: url('bg.png') no-repeat fixed center;

margin: 0px;

height: 100%;

background-size:cover;

}

canvas {

border-radius: 0px 0px 5px 5px;

}

#savedCopyContainer {

display: none;

}

#savedCopyContainer img {

width: 640px;

height: 480px;

background-color: white;

}

ПРИЛОЖЕНИЕ Г

Файл: popup.html

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<canvas id="canvas" width="640" height="480"></canvas>

<script src="main.js"></script>

</head>

<body class="body">

<div class="buttons">

<button onclick="saveCanvas()">Сохранить</button>

<button onclick="clearCanvas()">Очистить</button>

<div id="savedCopyContainer">

<img id="savedImageCopy">

</div>

<img style="position: fixed; bottom: 2; right: 2; margin: auto; "src="128.png" class="logo">

<INPUT TYPE=button VALUE="О расширении" onClick="window.alert('PaintPad ver: Pre-Alpha 2015-2016 Расширение распространяется бесплатно [K.GLADKIH]'); "src="128.png";>

</body>

</html>