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
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>