Введение в Wacom Javascript API / Хабр

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
Больше примеров
Документация