daily pastebin goal
5%
SHARE
TWEET

Untitled

a guest Jun 13th, 2018 48 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. # add this js file /static/js/image_edit.js
  2.  
  3. $(document).ready(function(){
  4.     var width = window.innerWidth;
  5.     var height = window.innerHeight;
  6.  
  7.     function update(activeAnchor) {
  8.         var group = activeAnchor.getParent();
  9.  
  10.         var topLeft = group.get('.topLeft')[0];
  11.         var topRight = group.get('.topRight')[0];
  12.         var bottomRight = group.get('.bottomRight')[0];
  13.         var bottomLeft = group.get('.bottomLeft')[0];
  14.         var image = group.get('Image')[0];
  15.  
  16.         var anchorX = activeAnchor.getX();
  17.         var anchorY = activeAnchor.getY();
  18.  
  19.         // update anchor positions
  20.         switch (activeAnchor.getName()) {
  21.             case 'topLeft':
  22.                 topRight.setY(anchorY);
  23.                 bottomLeft.setX(anchorX);
  24.                 break;
  25.             case 'topRight':
  26.                 topLeft.setY(anchorY);
  27.                 bottomRight.setX(anchorX);
  28.                 break;
  29.             case 'bottomRight':
  30.                 bottomLeft.setY(anchorY);
  31.                 topRight.setX(anchorX);
  32.                 break;
  33.             case 'bottomLeft':
  34.                 bottomRight.setY(anchorY);
  35.                 topLeft.setX(anchorX);
  36.                 break;
  37.         }
  38.  
  39.         image.position(topLeft.position());
  40.  
  41.         var width = topRight.getX() - topLeft.getX();
  42.         var height = bottomLeft.getY() - topLeft.getY();
  43.         if(width && height) {
  44.             image.width(width);
  45.             image.height(height);
  46.         }
  47.     }
  48.     function addAnchor(group, x, y, name) {
  49.         var stage = group.getStage();
  50.         var layer = group.getLayer();
  51.  
  52.         var anchor = new Konva.Circle({
  53.             x: x,
  54.             y: y,
  55.             stroke: '#666',
  56.             fill: '#ddd',
  57.             strokeWidth: 2,
  58.             radius: 8,
  59.             name: name,
  60.             draggable: true,
  61.             dragOnTop: false
  62.         });
  63.  
  64.         anchor.on('dragmove', function() {
  65.             update(this);
  66.             layer.draw();
  67.         });
  68.         anchor.on('mousedown touchstart', function() {
  69.             group.setDraggable(false);
  70.             this.moveToTop();
  71.         });
  72.         anchor.on('dragend', function() {
  73.             group.setDraggable(true);
  74.             layer.draw();
  75.         });
  76.         // add hover styling
  77.         anchor.on('mouseover', function() {
  78.             var layer = this.getLayer();
  79.             document.body.style.cursor = 'pointer';
  80.             this.setStrokeWidth(4);
  81.             layer.draw();
  82.         });
  83.         anchor.on('mouseout', function() {
  84.             var layer = this.getLayer();
  85.             document.body.style.cursor = 'default';
  86.             this.setStrokeWidth(2);
  87.             layer.draw();
  88.         });
  89.  
  90.         group.add(anchor);
  91.     }
  92.  
  93.     var stage = new Konva.Stage({
  94.         container: 'container',
  95.         width: width,
  96.         height: height
  97.     });
  98.  
  99.     var layer = new Konva.Layer();
  100.     stage.add(layer);
  101.  
  102.     var imagesSrc = $('img.edit-image');
  103.  
  104.     imagesSrc.each(function(){
  105.  
  106.         var x = $(this).offset().top;
  107.         var y = $(this).offset().left;
  108.         var width = $(this).width()
  109.         var height = $(this).height();
  110.  
  111.         console.log(x, y);
  112.  
  113.         // darth vader
  114.         var konvaImg = new Konva.Image({
  115.             width: width,
  116.             height: height
  117.         });
  118.  
  119.  
  120.         var konvaImgGroup = new Konva.Group({
  121.             x: x,
  122.             y: y,
  123.             draggable: true
  124.         });
  125.  
  126.         layer.add(konvaImgGroup);
  127.         konvaImgGroup.add(konvaImg);
  128.         addAnchor(konvaImgGroup, x, x, 'topLeft');
  129.         addAnchor(konvaImgGroup, width, x, 'topRight');
  130.         addAnchor(konvaImgGroup, width, height, 'bottomRight');
  131.         addAnchor(konvaImgGroup, x, height, 'bottomLeft');
  132.  
  133.         var imageObj = new Image();
  134.         imageObj.onload = function() {
  135.             konvaImg.image(imageObj);
  136.             layer.draw();
  137.         };
  138.  
  139.         imageObj.src = $(this).attr('src');
  140.  
  141.     });
  142.  
  143. });
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