пятница, 14 октября 2016 г.

Реализация Online редактора фонового SVG изображения

 Реализация Online редактора фонового SVG изображения.

Для того чтобы отобразить SVG код введенный в textarea, был написан код который по таймеру преобразует SVG код введенный в textarea в base64 и подставляет в document.body.style.backgroundImage с соответствующим mime type: "data:image/svg+xml;base64". Преобразование в base64 необходимо чтобы некоторые символы не ломали загрузку изображения, пример: задание цвета с помощью конструкции #RRGGBB - символ '#'.

Drag and drop "окна" редактирования сделан с помощью JavaScript по причине того что установка атрибута draggable='true' не заставляла работать Drag and drop должным образом в используемом браузере - FireFox.
При быстром перемещении "окна" возможна потеря курсора, проблему можно решить функциями захвата мыши setCapture\releaseCapture от которых, к сожалению, пришлось отказаться, по причине того что реализованы они только в FireFox.

Ссылка на редактор: http://kodaktor.ru/73af581

Исходный код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>SVG background editor</title>
    <meta name="Peter S." content="SVG background editor">
    <style>
      body
      { 
        margin-left: 0px;
      }
    
      #Panel
      {
        width: 420px;
        height: 240px;  
        position: absolute;
        background-color: #444444;
        cursor: move;
        left: 100px;
        top: 100px;
      }
      
      #ClickablePanel
      {
        width: 98%;
        height: 90%;
        margin: auto;
        padding-top: 20px; 
      }
      
      #Memo
      {
        width: 100%;
        height: 100%;
        border: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>

    <div id="Panel" >
      <div id="ClickablePanel">
        <textarea id='Memo'><svg xmlns="http://www.w3.org/2000/svg" width="60" height="60">
<ellipse fill="#00FF00" stroke="#000000" opacity="0.4" stroke-width="5" cx="30" cy="30" rx="20" ry="20"/>
</svg></textarea>
      </div>
    </div>

  <script>
  Panel = document.getElementById('Panel');
  ClickablePanel = document.getElementById('ClickablePanel');
    
  ClickablePanel.onmousedown = OnMouseDown;
  ClickablePanel.onmousemove = OnMouseMove;
  ClickablePanel.onmouseup = OnMouseUp;  
  
  sx = 0;
  sy = 0;
  IsDrag = false; 
  
  function OnMouseDown(event)
  {
    if(event.target.getAttribute('id') == 'ClickablePanel')
    {
      IsDrag = true;
      sx = event.clientX - Panel.getBoundingClientRect().left;
      sy = event.clientY - Panel.getBoundingClientRect().top;
      Panel.style.opacity = 0.5;
    } 
  }
  
  function OnMouseMove(event)
  {
    if(IsDrag)
    {
      Panel.style.top = event.clientY - sy + 'px';
      Panel.style.left = event.clientX - sx + 'px';
    } 
  }
  
  function OnMouseUp(event)
  {
    IsDrag = false;
    Panel.style.opacity = 1;
  }
     
  Memo = document.getElementById('Memo');
 
  setInterval(function() {
    document.body.style.backgroundImage = 'url(\'data:image/svg+xml;base64,' + window.btoa(Memo.value) + '\')';
  }, 100);    
    
  </script>   
  </body>
</html>

at

1 комментарий:

Подписаться на: Комментарии к сообщению (Atom)