Draw on SVG using AngularJS

Developer
Sten Hougaard
Size
4,894 Kb
Views
58,696
  1. Draw on SVG using AngularJS Previews
  2. Draw on SVG using AngularJS HTML Codes
  3. Draw on SVG using AngularJS CSS Codes
  4. Draw on SVG using AngularJS JS Codes

How do I make an draw on svg using angularjs?

Doing coding work-out on the Bootstrap, AngularJS and SVG area.. What is a draw on svg using angularjs? How do you make a draw on svg using angularjs? This script and codes were developed by Sten Hougaard on 07 July 2022, Thursday.

Draw on SVG using AngularJS Previews
IQ Test

Draw on SVG using AngularJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draw on SVG using AngularJS</title> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ svg { box-shadow: 0 0 10px 10px rgba(0,0,0,.14);
}
svg circle { fill: rgba(255,255,178,.5);
}
svg path { stroke: rgba(145,56,178,.4);
}
svg image { opacity: .6;
}
svg .focus { stroke: rgba(178,145,56,.7); fill: rgba(178,255,255,.7);
}
.toolbox { height: 60px;
}
.toolbox h4 { line-height: 20px; margin: 0px 0px 10px;
}
.svg { height: 400px; width: 400px; background: url('data:image/svg+xml;utf8,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIGlkPSJjaXJjbGUiPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEwIiAvPjwvc3ZnPg==');
}
input[type="radio"] { display:none;
}
input[type="radio"] + label span { display:inline-block; width:32px; height:30px;
background: transparent url("http://dl.dropboxusercontent.com/u/3260327/tools.svg?1") 0 0px no-repeat; background-size: 115px; line-height: 30px; padding: 0px;
}
input[type="radio"]:checked + label span { background-position: left -30px ;
}
input#line[type="radio"] + label span { background-position: -33px 0 ;
}
input#line[type="radio"]:checked + label span { background-position: -33px -30px ;
}
.edit { height:4em; overflow-y: auto;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container" ng-app="myApp" ng-controller="Example"> <div class="jumbotron"> <div class="container"> <h2>Draw on SVG using AngularJS</h2> <p> <code>Click</code>mouse to draw with selected tool - <mark>not finished!</mark> </p> <div class="col-md-12 tags"> <strong>Tags:</strong> <span ng-repeat="tag in tags"> <a href="http://codepen.io/search?q={{tag}}&limit=all&depth=everything&show_forks=false"> <code class="btn btn-primary btn-xs">{{tag}}</code> </a> </span> </div> </div> </div> <div class="container"> <div class="row toolbox"> <div class="col-md-1"> <h4>Toolbox</h4> </div> <div class="col-md-4"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default" ng-class="{'btn-success':currentTool==0}"> <input type="radio" ng-model="currentTool" name="options" id="field{{$index}}1" ng-value="0">Circle </label> <label class="btn btn-default" ng-class="{'btn-success':currentTool==1}"> <input type="radio" ng-model="currentTool" name="options" id="field{{$index}}2" ng-value="1">Line </label> </div> </div> <div class="col-md-7"> <label class="btn btn-default" ng-click="transform()" title="This will toggle between drawing tools used"> Transform !! </label> </div> </div> <div class="row"> <div class="col-md-12"> <svg ng-click="draw($event)" ng-attr-height="{{graph.height}}" ng-attr-width="{{graph.width}}"> <image id="kort" sketch:type="MSBitmapLayer" x="-3" y="-3" width="1125" height="798" xlink:href="https://dl.dropboxusercontent.com/u/3260327/kort.jpg"></image> <g ng-repeat="ele in elements"> <g ng-switch on="ele.type"> <circle ng-switch-when="0" ng-attr-cx="{{ele.x}}" ng-attr-cy="{{ele.y}}" ng-attr-r="{{ele.r}}" stroke-width="{{ele.sw||sw}}" class="{'focus':ele.f===1}"> </circle> <path ng-switch-when="1" d="M{{ele.lx}},{{ele.ly}} L{{ele.x}},{{ele.y}}" stroke-width="{{ele.sw||sw}}" class="{'focus':ele.f===1}"/> </g> </g> </svg> </div> </div> <div class="row"> <h2>Edit the elements</h2> <div class="col-md-1">Type</div> <div class="col-md-1">Last X</div> <div class="col-md-1">Last Y</div> <div class="col-md-1">X</div> <div class="col-md-1">Y</div> <div class="col-md-1">Radius</div> <div class="col-md-1">Stroke width</div> </div> <div class="row edit"> <div ng-repeat="e in elements" class="col-md-12"> <div class="col-md-1"> <input type="number" class="form-control input-sm" step="1" title="Type" min="0" max="1" ng-model="e.type"> </div> <div class="col-md-1"> <input type="number" class="form-control input-sm" step="1" title="" ng-model="e.lx"> </div> <div class="col-md-1"> <input type="number" class="form-control input-sm" step="1" title="" ng-model="e.ly"> </div> <div class="col-md-1"> <input type="number" class="form-control input-sm" step="1" title="" ng-model="e.x"> </div> <div class="col-md-1"> <input type="number" class="form-control input-sm" step="1" title="" ng-model="e.y"> </div> <div class="col-md-1"> <input type="number" class="form-control input-sm" step="1" title="" min="1" max="10000" ng-model="e.r"> </div> <div class="col-md-1"> <input type="number" class="form-control input-sm" step="1" title="" min="0" max="1000" ng-model="e.sw"> </div> </div> </div> </div>
</div>
<!-- UNDER CONSTRUNCTION START -->
<div id="banner"><a href="">Not finished</a>
</div>
<style type="text/css">
/* RELATED TO UNDER CONSTRUCTION ONLY */ #banner { height: 149px; width: 149px; overflow:hidden; padding: 0; margin: 0; position: fixed; right: 0px; top: 0px;
}
#banner a { display: block; width: 230px; font-size: 14px; font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif; background-color: #333; color: #FFF; word-spacing: 2px; text-decoration: none; padding: 5px 15px 5px 25px; position:relative; left: 20px; top: -37px; text-align: center; -moz-transform-origin: 0 0; -moz-transform:rotate(45deg); -moz-box-shadow: 1px 1px 5px 1px #666; -webkit-transform-origin: 0 0; -webkit-transform:rotate(45deg); -webkit-box-shadow: 1px 1px 5px 1px #666; -ms-transform-origin: 0 0; -ms-transform:rotate(45deg); -ms-box-shadow: 1px 1px 5px 1px #666; transform-origin: 0 0; transform:rotate(45deg); box-shadow: 1px 1px 5px 1px #666; background-image: linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%); background-image: -o-linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%); background-image: -moz-linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%); background-image: -webkit-linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%); background-image: -ms-linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.03, #000000), color-stop(0.05, #666666), color-stop(0.07, #000000), color-stop(0.93, #000000), color-stop(0.95, #666666), color-stop(0.97, #000000));
}
</style>
<!-- UNDER CONSTRUNCTION END --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Draw on SVG using AngularJS - Script Codes CSS Codes

svg { box-shadow: 0 0 10px 10px rgba(0,0,0,.14);
}
svg circle { fill: rgba(255,255,178,.5);
}
svg path { stroke: rgba(145,56,178,.4);
}
svg image { opacity: .6;
}
svg .focus { stroke: rgba(178,145,56,.7); fill: rgba(178,255,255,.7);
}
.toolbox { height: 60px;
}
.toolbox h4 { line-height: 20px; margin: 0px 0px 10px;
}
.svg { height: 400px; width: 400px; background: url('data:image/svg+xml;utf8,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIGlkPSJjaXJjbGUiPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjEwIiAvPjwvc3ZnPg==');
}
input[type="radio"] { display:none;
}
input[type="radio"] + label span { display:inline-block; width:32px; height:30px;
background: transparent url("http://dl.dropboxusercontent.com/u/3260327/tools.svg?1") 0 0px no-repeat; background-size: 115px; line-height: 30px; padding: 0px;
}
input[type="radio"]:checked + label span { background-position: left -30px ;
}
input#line[type="radio"] + label span { background-position: -33px 0 ;
}
input#line[type="radio"]:checked + label span { background-position: -33px -30px ;
}
.edit { height:4em; overflow-y: auto;
}

Draw on SVG using AngularJS - Script Codes JS Codes

angular.module("myApp",[])
.filter('fromTo', function() { return function(input, from, total, lessThan) { from = parseInt(from); total = parseInt(total); for (var i = from; i < from+total && i<lessThan; i++) { input.push(i); } return input; }
})
.controller("Example", function($scope, $interval) { $scope.tools = ['circle','line']; $scope.currentTool = 0; $scope.radius = 15; $scope.x = 0; $scope.y = 0; $scope.lastX = 0; $scope.lastY = 0; $scope.sw = 5; $scope.draw = function(e) { $scope.lastX = $scope.x; $scope.lastY = $scope.y; $scope.x = e.offsetX; $scope.y = e.offsetY; $scope.elements.push({ "type":$scope.currentTool, "x":$scope.x, "y":$scope.y, "lx":$scope.lastX, "ly":$scope.lastY, "r":$scope.radius, "f":0, "sw":$scope.sw }); }; $scope.graph = {'width': 960, 'height': 434}; $scope.elements = [ ]; $scope.transform = function() { for(var i=0; i<$scope.elements.length; i++) { $scope.elements[i].type = ($scope.elements[i].type===1) ? 0 : 1; } } $scope.tags = [ 'Bootstrap','AngularJS','svg' ]
});
Draw on SVG using AngularJS - Script Codes
Draw on SVG using AngularJS - Script Codes
Home Page Home
Developer Sten Hougaard
Username netsi1964
Uploaded July 07, 2022
Rating 3.5
Size 4,894 Kb
Views 58,696
Do you need developer help for Draw on SVG using AngularJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sten Hougaard (netsi1964) Script Codes
Name
Test CSS variables and inheritance
Rendering NASDAQ data using AngularJS
Use execCommands to edit HTML content in your browser
Knob drawn in SVG to rotate birds
SVG manipulate paths
Get info about visitor
SVG background image
Generate beautiful SVG polygons
HTML5 paste image to page
Custom cursors using data-uri
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!