SHARE
TWEET

Untitled

a guest Feb 19th, 2020 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2.             var width = window.innerWidth;
  3.             var height = window.innerHeight;
  4.  
  5.             var stage = new Konva.Stage({
  6.                 container: 'container',
  7.                 width: width,
  8.                 height: height
  9.             });
  10.  
  11.             var layer = new Konva.Layer();
  12.             stage.add(layer);
  13.  
  14.             var itemURL = '';
  15.             document
  16.                 .getElementById('drag-items')
  17.                 .addEventListener('dragstart', function(e) {
  18.                 itemURL = e.target.src;
  19.             });
  20.  
  21.             var con = stage.container();
  22.             con.addEventListener('dragover', function(e) {
  23.                 e.preventDefault();
  24.             });
  25.  
  26.             var images = [];
  27.  
  28.             con.addEventListener('drop', function(e) {
  29.                 e.preventDefault();
  30.                 stage.setPointersPositions(e);
  31.  
  32.                 Konva.Image.fromURL(itemURL, function(image) {
  33.                     layer.add(image);
  34.                     image.position(stage.getPointerPosition());
  35.                     image.draggable(true);
  36.                     layer.draw();
  37.                     images.push(image);
  38.                 });
  39.             });
  40.  
  41.             stage.on('click tap', function(e) {
  42.               //  console.log(images);
  43.                if (images.includes(e.target)) {
  44.                     // destroy the others
  45.                     stage.find('Transformer').destroy();
  46.                     // create new transformer
  47.                     var tr = new Konva.Transformer();
  48.                     layer.add(tr);
  49.                     tr.attachTo(e.target);
  50.                     layer.draw();
  51.  
  52.  
  53.  
  54.                     return;
  55.                 }
  56.                 // if click on empty area - remove all transformers
  57.                 if (e.target === stage) {
  58.                     stage.find('Transformer').destroy();
  59.                     layer.draw();
  60.                     return;
  61.                 }
  62.                 // remove old transformers
  63.                 // TODO: we can skip it if current rect is already selected
  64.                 stage.find('Transformer').destroy();
  65.             });
  66.  
  67.         </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top