html5 canvas и электронный документооборот
TRANSCRIPT
HTML 5 canvas лект о доку е тоо о от
Зотов М к м. Senior PрP отч к BWT Team.
ТЗ.
• Дел т п доку е те от ук лект о о де е. • З пол т д е доку е те кл ту то д е
о о ло о т у д . • П т у ко у е, пото п одол т пол е е
лект о о де е.
Что пол ов л .
• PDF PDн form
• PDF.JS
• HTML5 canvas.
• Anoto Formidable Digital Pens.
PDF PDн from.
• Portable Document Format (PDF) — е пл т о е о т лект о доку е то , от о Adobe
Systems пол о е д о о о те к PostScript.
• Фо т PDн по ол ет ед т ео од е т по т о тек т , екто е т о е о е , о ул т ед - т к
PDF.JS
• PDн.js л pdf.js — о од ое п о ое о е пе е е рTMэ5 JavaScript дл п ео о ло о те PDн код рTMэ5, п од дл п о от е - у е е. • https://github.com/mozilla/pdf.js
• https://mozilla.github.io/pdf.js/web/viewer.html
PDF.JS. Hello World
• var url = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
PDFJS.workerSrc = 'pdf.worker.js';
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
PDF.JS
К к е фо ?
• Ну о отдел о п т pdf. Со д т т д html о у кл д т ее по е canvas.
К к е фо ?
• {
"page_number":1,
"field_name":"test_9",
"field_values":[],
"field_type": "text",
"field_is_multiline":0,
"field_position":[
{
"height":11.006989,
"page":1,
"width":79.79999,
"left":499.56,
"units":"px",
"top":324.72
}
],
"field_style":{
"color":"",
"font":"Helvetica",
"size":"8"
}
Т п поле фо .
• Checkbox
• Text
• Radiobutton
• combobox
HTML5 CANVAS
• Canvas ( л. canvas — « ол т», у . канва́с) — ле е т HTML5, п ед е дл о д т о о о д у е о о
о е п по о к пто , о о ке JavaScript.
• Н ло от ёт лок од т ле е у. По у ол е о т е т п к ел , от т п т де т
Подде к у е ов
HTML5 CANVAS. Hello World
• <!DOCTYPE html>
<html lang="en">
<head>
<script>
(function () {
"use strict";
window.addEventListener('load', ready, false);
function ready () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(canvas.width, canvas.height);
context.stroke();
}
})();
</script>
</head>
<body>
<canvas id="canvas" style="border: solid 1px;"></canvas>
</body>
</html>
HTML5 CANVAS. Hello World
HTML5 CANVAS. Draw
• canvas.addEventListener('mousedown', draw, false);
canvas.addEventListener('mousemove', draw,
false);
canvas.addEventListener('mouseup', draw,
false);
canvas.addEventListener('mouseout', draw,
false);
HTML5 CANVAS. Draw
• function draw(event) {
switch (event.type) {
case 'mousedown' :
started = true;
context.beginPath();
context.moveTo(event.offsetX, event.offsetY);
break;
case 'mousemove' :
if(started) {
context.lineTo(event.offsetX, event.offsetY);
context.stroke();
}
break;
case 'mouseup' :
case 'mouseout' :
started = false;
context.closePath();
break;
}
}
HTML5 CANVAS. Draw
HTML5 CANVAS. Draw
HTML5 CANVAS. Draw
HTML5 CANVAS. Draw
HTML5 CANVAS. Draw
HTML5 CANVAS. Draw
HTML5 CANVAS. Draw
HTML5 CANVAS. ZOOM
• Canvas то т о к , п е е е те ет к е т о. • Но од е т . П у ел е л у е е е
пе е о т у ето scale.
HTML5 CANVAS. ZOOM
• canvas.style.transform = 'scale(' + scale +
')';
drawStrokes(strokes, bufferContext, scale);
context.drawImage(self.bufferCanvas, 0, 0);
canvas.style.transform = 'scale(1)';
HTML5 CANVAS. Eraser
• context.clearRect(x, y, 10, 10);
Formidable Digital Pens.
• http://www.anoto.com
• http://www.formidablemdc.com/digital-pens/
Сп о в е. оп о ?