Введение в Wacom Javascript API

    image

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

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 10

      0
      Завести так и не вышло, ни в хроме, ни в Safari. plugin.isWacom утверждает, что ваком таки есть, но ни модель, ни какие-то данные с планшета получить не выходит. Впрочем, WacomPluginTableCanvasDemo тоже не работает, так что это стоит записать в «очень много багов» :)
      0
      А для каких конкретно моделей плагин работает?
      Ведутся ли работы по удалению багов? Багтрекер есть?
        0
        Как мне известно — для всех. Я не представитель и тд. Но о баге, котором нашел сообщил с помощью этой формы. www.wacom.com/en/Company/~/link.aspx?_id=6A0F408096B3494F81980A5B43B8EB67&_z=z
        0
        У меня не заработало. Но у меня Ваком древний, ему уже лет 7, может поэтому?
          0
          Пример работает с древним «графир 2»
          Был очень удивлен.
            +9
            image
              0
              Сначала подумал, что это значок хабрахабра
            0
            Есть еще mozPressureLevel
              0
              Отличная идея!
              Если решение будет стабильно работать — куплю себе планшет.
              Однако пока всё застряло в 2010 году…

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое