Wacom Javascript API позволяет приложению получить разные интересные параметры текущего состояния планшета. Например, силу нажатия или координаты ручки относительно планшета. А так же статические данные, такие как версия плагина или модель планшета.
В данном Хабратопике я покажу, как работает данный API, на примере HTML5 Canvas «рисовалки».
Получение объекта плагина
HTML
<embed name="wacom-plugin" id="wacom-plugin" type="application/x-wacom-tablet" HIDDEN="TRUE"></embed>
Javascript
var plugin;
window.onload = function() {
var plugin = document.getElementById("wacom-plugin");
}
После этого, мы можем обращаться к переменной plugin. Ниже список параметров, которые мы можем получить от плагина.
(переводил я, оригинал — ссылка в конце топика)
Это значит, что все вышеперечисленные свойства читаются так: plugin.something, т.е. получить модель планшета можно так:
var model = plugin.TabletModel;
Применение на практике
Я хочу показать, как можно использовать этот API на примере простой «рисовалки» на HTML Canvas, чтобы ширина кисти зависела от силы нажатия.
index.html
<!DOCTYPE html>
<html>
<head>
<title> Wacom Javascript API </title>
</head>
<body style="margin:0; padding: 0;">
<canvas id="main" width="500" height="500"></canvas>
<embed name="wacom-plugin" id="wacom-plugin"
type="application/x-wacom-tablet" HIDDEN="TRUE"></embed>
<script type="text/javascript">
//по загрузке страницы подключаем скрипт wacom.js
window.onload = function() {
var el = document.createElement("script");
el.type = "text/javascript";
el.src = "wacom.js?"+Math.random();
document.getElementsByTagName("head")[0].appendChild(el);
}
</script>
</body>
</html>
wacom.js
var plugin = document.getElementById("wacom-plugin"); //получаем плагин
var canvas = document.getElementById("main"); //получаем элемент канваса
var context = canvas.getContext("2d"); //получаем контекст для рисования
context.lineCap = "round"; //стиль завершения линий - округлый
context.lineJoin = "round"; //стиль изгиба линий - округлый
context.strokeStyle = "#6DA3BD"; //цвет линии
//переменные для хранения предыдущих координат (для рисования линий)
var oldX = 0;
var oldY = 0;
var mousedown = false; //флаг, если человек давит на планшет
canvas.onmousedown = function(e) {
mousedown = true; //устанавливаем флаг для начала рисования (начало штриха)
oldX = e.pageX; //устанавливаем первичные значения для предыдущих координат
oldY = e.pageY;
onMouseMove(e); //отправляем на функцию рисования (чтобы рисовало и обычные точки)
}
canvas.onmousemove = onMouseMove;
function onMouseMove(e) {
if(!mousedown) return;
if(plugin) { //проверяем, есть ли плагин планшета
context.lineWidth = 25 * plugin.pressure; //делаем ширину кисти зависимую от силы нажатия
} else {
context.lineWidth = 25; //если человек рисует мышью и планшет не подключен
}
context.beginPath(); //открываем путь
context.moveTo(oldX, oldY); //двигаем к предыдущем координатам
context.lineTo(e.pageX, e.pageY); //проводим линию к текущим
context.stroke(); //рисуем линию
oldX = e.pageX; //устанавливаем координаты предыдущего штриха
oldY = e.pageY;
}
canvas.onmouseup = function() {
mousedown = false; //конец штриха
}
Заключение
Wacom Javascript API работает только при установленых проприетарных драйверах (Плагин устанавливается автоматически). В нем пока очень много багов. Для того, чтобы работать с Wacom Javascript API из Flash, нужно использовать ExternalInterface.
Посмотреть пример «Рисовалки»
Скачать исходники
Ссылки по теме:
Блог mr'DooB
Больше примеров
Документация