How to Draw shapes using Angular Js directives ?





Here is the steps to draw shapes using angular directives

Step 1:

configure angular app with required modules

'use strict';
// Defining Modules
var app = angular.module('starter', ['ngRoute','ui.router', 'ngMessages', 'ngStorage','angular-loading-bar', 'ngAnimate','chart.js','ui.bootstrap']);

Note: use the modules what you have require

Step 2:

Create Directive, for choosing shapes, here is the full code
var shape = '';
app.directive("drawingshape", function(){ 
  return {
    restrict: "A",
    link: function(scope, element){  
  element.bind('change', function(event) {
   shape = event.target.defaultValue;
  });
 } 
  };
});

and html
<h3>Choose Shape</h3>
<div class="choose-shapes">
 <span class="shapechoice"><input type="radio" name="shape" value="custom" drawingshape /><img src="images/custom.jpg" /></span>
 <span class="shapechoice"><input type="radio" name="shape" value="square" drawingshape /><img src="images/square.jpg" /></span>
</div>

Step 3:

Create shape functions, here is the full code
app.directive("drawing", function(){ 
  return {
    restrict: "A",
    link: function($scope, element){
  $scope.squares = [{
   id: 1, 
   x : '90.5',
   y : '14.5',  
   w : '7.65',
   h : '20.5',
  },{
   id: 2, 
   x : '80.5195',
   y : '45.2681',  
   w : '18.4601',
   h : '35.0158',
  }]; 
  
        var ctx = element[0];
  var drawing = false; 
  var i = 1;  
  var extrawidth = 10;
  var extraheight = 10;
  drawSquare();
  var left,top,width,height,target,layerX,layerX1,layerY,layerY1;
  function drawSquare()
  { 
   console.log($scope.squares);
   for(var j = 0; j < $scope.squares.length; j++){  
    var con = angular.element('<div class="drawing drawing-'+$scope.squares[j]["id"]+'" id="drawing-'+$scope.squares[j]["id"]+'" style="left: '+$scope.squares[j]["x"]+'%; top: '+$scope.squares[j]["y"]+'%; width: '+$scope.squares[j]["w"]+'%; height: '+$scope.squares[j]["h"]+'%;"></div>');
    element.append(con);  
    i = $scope.squares[j]["id"]+1;
   }
  }
  element.bind('mousedown', function(event){
   if(shape == 'square'){ 
    width = element[0].offsetWidth;
    height = element[0].offsetHeight;
    layerX = event.layerX;
    layerY = event.layerY; 
    drawing = true; 
    left = (layerX/width)*100;
    top = (layerY/height)*100; 
    var con = angular.element('<div class="drawing drawing-'+i+'" id="drawing-'+i+'" style="left: '+left+'%; top: '+top+'%;"></div>'); 
    element.append(con); 
   }
   else if(shape == 'custom')  
   {
    
   }
  });
  element.bind('mousemove', function(event){ 
   if(shape == 'square'){ 
    if(drawing == true)
    {
     layerX1 = event.layerX;
     layerY1 = event.layerY; 
    }
    
    target = '#drawing-'+i;
    extrawidth = layerX1 - layerX;
    extraheight = layerY1 - layerY;
    if(extrawidth >= 10)
    {
     extrawidth = (extrawidth/width)*100;
    }
    if(extraheight >= 10)
    {
     extraheight = (extraheight/height)*100;;
    }
    
    var myEl = angular.element( document.querySelector( target ) ); 
    myEl.css('width', extrawidth+'%');
    myEl.css('height', extraheight+'%'); 
   }
   else if(shape == 'custom')  
   {
    
   }
  });
  element.bind('mouseup', function(event){ 
   var extra = '';
   if(shape == 'square'){ 
    drawing = false; 
    
    var array = 
    {
     id: i, 
     x : left,
     y : top,  
     w : extrawidth,
     h : extraheight,
    };
    $scope.squares.push(array);
    console.log($scope.squares);
    i = i+1;
   }
   else if(shape == 'custom')  
   {
    
   }
  });
    }
 
  };
});

html
<div class="uiholder" drawing > 
 <div class="drawing-objects"></div>
 <img src="images/venue.jpg" alt="" />
</div>




Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.