├── .github └── workflows │ └── codeql-analysis.yml ├── LICENSE ├── README.md └── src └── angular-canvas-area-draw.js /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # *********************************** WARNING ************************************** 2 | # We have not automatically identified the languages in your repository. 3 | # Please edit the `language:` list below to add the appropriate supported languages. 4 | # ********************************************************************************** 5 | name: "CodeQL" 6 | 7 | on: 8 | push: 9 | branches: [master] 10 | pull_request: 11 | # The branches below must be a subset of the branches above 12 | branches: [master] 13 | schedule: 14 | - cron: '0 6 * * 4' 15 | 16 | jobs: 17 | analyze: 18 | name: Analyze 19 | runs-on: ubuntu-latest 20 | 21 | strategy: 22 | fail-fast: false 23 | matrix: 24 | # Override automatic language detection by changing the below list 25 | # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python'] 26 | language: ['javascript'] 27 | # Learn more... 28 | # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection 29 | 30 | steps: 31 | - name: Checkout repository 32 | uses: actions/checkout@v2 33 | with: 34 | # We must fetch at least the immediate parents so that if this is 35 | # a pull request then we can checkout the head. 36 | fetch-depth: 2 37 | 38 | # If this run was triggered by a pull request event, then checkout 39 | # the head of the pull request instead of the merge commit. 40 | - run: git checkout HEAD^2 41 | if: ${{ github.event_name == 'pull_request' }} 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v1 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 52 | 53 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 54 | # If this step fails, then you should remove it and run the build manually (see below) 55 | - name: Autobuild 56 | uses: github/codeql-action/autobuild@v1 57 | 58 | # ℹ️ Command-line programs to run using the OS shell. 59 | # 📚 https://git.io/JvXDl 60 | 61 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 62 | # and modify them (or add more) to build your code if your project 63 | # uses a compiled language 64 | 65 | #- run: | 66 | # make bootstrap 67 | # make release 68 | 69 | - name: Perform CodeQL Analysis 70 | uses: github/codeql-action/analyze@v1 71 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Sedrak Dalaloyan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-canvas-area-draw 2 | 3 | Simple directive to draw polygons over image using canvas 4 | 5 | ### Demo: 6 | https://sedrakpc.github.io/ 7 | 8 | ### Preview: 9 | ![alt tag](https://user-images.githubusercontent.com/6464002/134110411-d8397ae1-9d2d-4fd9-bceb-d6c557ad5026.png) 10 | 11 | ### Usage: 12 | 13 | ```html 14 |
17 | ``` 18 | ### Parameters 19 | 20 | _Param name_ | _Description_ 21 | ----------------|--------------- 22 | points | where to store drawing polygons coordinates 23 | active | current active polygon 24 | image-url | background image url 25 | enabled | is drawing enabled 26 | colorArray | color array with hex colors for every polygon layer, if color not specified for layer will be generated randomly 27 | -------------------------------------------------------------------------------- /src/angular-canvas-area-draw.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | (function(window) { 3 | angular.module('sd.canvas-area-draw', []); 4 | angular.module('sd.canvas-area-draw') 5 | .directive('canvasAreaDraw', function () { 6 | return { 7 | restrict: 'A', 8 | scope: { 9 | imageUrl: '=', 10 | enabled: '=', 11 | palette: '=', 12 | points: '=', 13 | active: '=' 14 | }, 15 | controller: function () { 16 | this.dotLineLength = function(x, y, x0, y0, x1, y1, o) { 17 | function lineLength(x, y, x0, y0){ 18 | return Math.sqrt((x -= x0) * x + (y -= y0) * y); 19 | } 20 | if(o && !(o = function(x, y, x0, y0, x1, y1){ 21 | if(!(x1 - x0)) return {x: x0, y: y}; 22 | else if(!(y1 - y0)) return {x: x, y: y0}; 23 | var left, tg = -1 / ((y1 - y0) / (x1 - x0)); 24 | return {x: left = (x1 * (x * tg - y + y0) + x0 * (x * - tg + y - y1)) / (tg * (x1 - x0) + y0 - y1), y: tg * left - tg * x + y}; 25 | }(x, y, x0, y0, x1, y1), o.x >= Math.min(x0, x1) && o.x <= Math.max(x0, x1) && o.y >= Math.min(y0, y1) && o.y <= Math.max(y0, y1))){ 26 | var l1 = lineLength(x, y, x0, y0), l2 = lineLength(x, y, x1, y1); 27 | return l1 > l2 ? l2 : l1; 28 | } 29 | else { 30 | var a = y0 - y1, b = x1 - x0, c = x0 * y1 - y0 * x1; 31 | return Math.abs(a * x + b * y + c) / Math.sqrt(a * a + b * b); 32 | } 33 | }; 34 | this.hexToRgb = function(hex){ 35 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 36 | return result ? { 37 | r: parseInt(result[1], 16), 38 | g: parseInt(result[2], 16), 39 | b: parseInt(result[3], 16) 40 | } : null; 41 | }; 42 | this.getMousePos = function (canvas, evt) { 43 | var rect = canvas.getBoundingClientRect(); 44 | return { 45 | x: evt.clientX - rect.left, 46 | y: evt.clientY - rect.top 47 | }; 48 | }; 49 | }, 50 | link: function(scope, element, attrs, ctrl){ 51 | 52 | var activePoint, settings = {}; 53 | var $canvas, ctx, image; 54 | 55 | settings.imageUrl = scope.imageUrl; 56 | 57 | if(!scope.points) { 58 | scope.points = [[]]; 59 | } 60 | 61 | if(!scope.active) { 62 | scope.active = 0; 63 | } 64 | 65 | $canvas = $(''); 66 | ctx = $canvas[0].getContext('2d'); 67 | 68 | image = new Image(); 69 | scope.resize = function() { 70 | $canvas.attr('height', image.height).attr('width', image.width); 71 | $canvas.attr('height', $canvas[0].offsetHeight).attr('width', $canvas[0].offsetWidth); 72 | scope.draw(); 73 | }; 74 | $(image).load(scope.resize); 75 | image.src = settings.imageUrl; 76 | if (image.loaded) scope.resize(); 77 | $canvas.css({background: 'url('+image.src+')'}); 78 | $canvas.css({backgroundSize: 'contain'}); 79 | 80 | $(element).append($canvas); 81 | 82 | scope.move = function(e) { 83 | if(!e.offsetX) { 84 | e.offsetX = (e.pageX - $(e.target).offset().left); 85 | e.offsetY = (e.pageY - $(e.target).offset().top); 86 | } 87 | var points = scope.points[scope.active]; 88 | points[activePoint][0] = Math.round(e.offsetX); 89 | points[activePoint][1] = Math.round(e.offsetY); 90 | scope.record(); 91 | scope.draw(); 92 | }; 93 | 94 | scope.stopdrag = function() { 95 | element.off('mousemove'); 96 | scope.record(); 97 | activePoint = null; 98 | }; 99 | 100 | scope.rightclick = function(e) { 101 | e.preventDefault(); 102 | if(!e.offsetX) { 103 | e.offsetX = (e.pageX - $(e.target).offset().left); 104 | e.offsetY = (e.pageY - $(e.target).offset().top); 105 | } 106 | var x = e.offsetX, y = e.offsetY; 107 | var points = scope.points[scope.active]; 108 | for (var i = 0; i < points.length; ++i) { 109 | var dis = Math.sqrt(Math.pow(x - points[i][0], 2) + Math.pow(y - points[i][1], 2)); 110 | if ( dis < 6 ) { 111 | points.splice(i, 1); 112 | scope.draw(); 113 | scope.record(); 114 | return false; 115 | } 116 | } 117 | return false; 118 | }; 119 | 120 | scope.mousedown = function(e) { 121 | if (!scope.enabled) { 122 | return false; 123 | } 124 | var points = scope.points[scope.active]; 125 | var x, y, dis, minDis = 0, minDisIndex = -1, lineDis, insertAt = points.length; 126 | 127 | if (e.which === 3) { 128 | return false; 129 | } 130 | 131 | e.preventDefault(); 132 | if(!e.offsetX) { 133 | e.offsetX = (e.pageX - $(e.target).offset().left); 134 | e.offsetY = (e.pageY - $(e.target).offset().top); 135 | } 136 | var mousePos = ctrl.getMousePos($canvas[0], e); 137 | x = mousePos.x; y = mousePos.y; 138 | for (var i = 0; i < points.length; ++i) { 139 | dis = Math.sqrt(Math.pow(x - points[i][0], 2) + Math.pow(y - points[i][1], 2)); 140 | if(minDisIndex == -1 || minDis > dis) { 141 | minDis = dis; 142 | minDisIndex = i; 143 | } 144 | } 145 | if ( minDis < 6 && minDisIndex >= 0 ) { 146 | activePoint = minDisIndex; 147 | element.on('mousemove', scope.move); 148 | return false; 149 | } 150 | 151 | for (var i = 0; i < points.length; ++i) { 152 | if (i > 1) { 153 | lineDis = ctrl.dotLineLength( 154 | x, y, 155 | points[i][0], points[i][1], 156 | points[i-1][0], points[i-1][1], 157 | true 158 | ); 159 | if (lineDis < 6) { 160 | insertAt = i; 161 | } 162 | } 163 | } 164 | 165 | points.splice(insertAt, 0, [Math.round(x), Math.round(y)]); 166 | activePoint = insertAt; 167 | element.on('mousemove', scope.move); 168 | 169 | scope.draw(); 170 | scope.record(); 171 | 172 | return false; 173 | }; 174 | 175 | scope.draw = function() { 176 | ctx.canvas.width = ctx.canvas.width; 177 | if(scope.points.length > 0) { 178 | scope.drawSingle(scope.points[scope.active], scope.active); 179 | } 180 | for(var p = 0; p < scope.points.length; ++p) { 181 | var points = scope.points[p]; 182 | if (points.length == 0 || scope.active == p) { 183 | continue; 184 | } 185 | scope.drawSingle(points, p); 186 | } 187 | 188 | }; 189 | 190 | scope.drawSingle = function (points, p) { 191 | 192 | ctx.globalCompositeOperation = 'destination-over'; 193 | ctx.fillStyle = 'rgb(255,255,255)'; 194 | ctx.strokeStyle = scope.palette[p]; 195 | ctx.lineWidth = 1; 196 | 197 | ctx.beginPath(); 198 | // ctx.moveTo(points[0], points[1]); 199 | for (var i = 0; i < points.length; ++i) { 200 | if(scope.active == p) { 201 | ctx.fillRect(points[i][0] - 2, points[i][1] - 2, 4, 4); 202 | ctx.strokeRect(points[i][0] - 2, points[i][1] - 2, 4, 4); 203 | } 204 | ctx.lineTo(points[i][0], points[i][1]); 205 | } 206 | ctx.closePath(); 207 | if(!scope.palette[p]) { 208 | scope.palette[p] = '#'+(function lol(m,s,c){return s[m.floor(m.random() * s.length)] + (c && lol(m,s,c-1));})(Math,'0123456789ABCDEF',4) 209 | } 210 | var fillColor = ctrl.hexToRgb(scope.palette[p]); 211 | ctx.fillStyle = 'rgba(' + fillColor.r + ',' + fillColor.g + ',' + fillColor.b + ',0.3)'; 212 | ctx.fill(); 213 | ctx.stroke(); 214 | }; 215 | 216 | scope.record = function() { 217 | scope.$apply(); 218 | }; 219 | 220 | scope.$watch('points', function (newVal, oldVal) { 221 | scope.draw(); 222 | }, true); 223 | 224 | scope.$watch('active', function (newVal, oldVal) { 225 | if (newVal != oldVal) scope.draw(); 226 | }); 227 | 228 | $canvas.on('mousedown', scope.mousedown); 229 | $canvas.on('contextmenu', scope.rightclick); 230 | $canvas.on('mouseup', scope.stopdrag); 231 | } 232 | }; 233 | }); 234 | }(this)); --------------------------------------------------------------------------------