fontselect.js
2 years ago
isimb-6310-admin-modal.js
2 years ago
isimb-6310-admin-script.js
10 months ago
isimb-6310-common.js
2 years ago
isimb-6310-nested-point.js
2 years ago
jquery.canvas.js
2 years ago
json-data.js
3 months ago
main-output-file.js
3 months ago
media-uploader.js
2 years ago
zoom-in-out-drag.js
1 year ago
jquery.canvas.js
308 lines
| 1 | (function ($) { |
| 2 | $.fn.canvasAreaDraw = function (options) { |
| 3 | this.each(function (index, element) { |
| 4 | init.apply(element, [index, element, options]); |
| 5 | }); |
| 6 | }; |
| 7 | |
| 8 | var init = function (index, input, options) { |
| 9 | var points, activePoint, settings; |
| 10 | var $reset, $canvas, ctx, image; |
| 11 | var draw, |
| 12 | mousedown, |
| 13 | stopdrag, |
| 14 | move, |
| 15 | moveall, |
| 16 | resize, |
| 17 | reset, |
| 18 | rightclick, |
| 19 | record; |
| 20 | var dragpoint; |
| 21 | var startpoint = false; |
| 22 | |
| 23 | settings = $.extend( |
| 24 | { |
| 25 | imageUrl: $(this).attr("isimb-6310-image-url"), |
| 26 | }, |
| 27 | options |
| 28 | ); |
| 29 | |
| 30 | var v = $(input) |
| 31 | .val() |
| 32 | .replace(/[^0-9\,]/gi, ""); |
| 33 | if (v.length) { |
| 34 | points = v.split(",").map(function (point) { |
| 35 | return parseInt(point, 10); |
| 36 | }); |
| 37 | } else { |
| 38 | points = []; |
| 39 | } |
| 40 | |
| 41 | $reset = $( |
| 42 | '<div class="isimb-6310-submenu"><div class="isimb-6310-clear"><i class="fas fa-eraser"></i> Clear</div><div class="isimb-6310-undo"><i class="fas fa-undo"></i> Undo</div></div>' |
| 43 | ); |
| 44 | $canvas = $("<canvas>"); |
| 45 | ctx = $canvas[0].getContext("2d"); |
| 46 | |
| 47 | image = new Image(); |
| 48 | resize = function () { |
| 49 | $canvas |
| 50 | .attr("height", image.height) |
| 51 | .attr("width", image.width) |
| 52 | .attr("class", "isimb-6310-canvas"); |
| 53 | draw(); |
| 54 | }; |
| 55 | $(image).load(resize); |
| 56 | image.src = settings.imageUrl; |
| 57 | if (image.loaded) { |
| 58 | resize(); |
| 59 | } |
| 60 | $canvas.css({ background: "url(" + image.src + ")" }); |
| 61 | |
| 62 | $(`${options} .isimb-6310-canvas-wrapper`).append($reset, "<br>", $canvas); |
| 63 | |
| 64 | reset = function () { |
| 65 | points = []; |
| 66 | draw(); |
| 67 | }; |
| 68 | |
| 69 | move = function (e) { |
| 70 | if (!e.offsetX) { |
| 71 | e.offsetX = e.pageX - $(e.target).offset().left; |
| 72 | e.offsetY = e.pageY - $(e.target).offset().top; |
| 73 | } |
| 74 | points[activePoint] = Math.round(e.offsetX); |
| 75 | points[activePoint + 1] = Math.round(e.offsetY); |
| 76 | draw(); |
| 77 | }; |
| 78 | |
| 79 | moveall = function (e) { |
| 80 | if (!e.offsetX) { |
| 81 | e.offsetX = e.pageX - $(e.target).offset().left; |
| 82 | e.offsetY = e.pageY - $(e.target).offset().top; |
| 83 | } |
| 84 | if (!startpoint) { |
| 85 | startpoint = { x: Math.round(e.offsetX), y: Math.round(e.offsetY) }; |
| 86 | } |
| 87 | var sdvpoint = { x: Math.round(e.offsetX), y: Math.round(e.offsetY) }; |
| 88 | for (var i = 0; i < points.length; i++) { |
| 89 | points[i] = sdvpoint.x - startpoint.x + points[i]; |
| 90 | points[++i] = sdvpoint.y - startpoint.y + points[i]; |
| 91 | } |
| 92 | startpoint = sdvpoint; |
| 93 | draw(); |
| 94 | }; |
| 95 | |
| 96 | stopdrag = function () { |
| 97 | $(this).off("mousemove"); |
| 98 | record(); |
| 99 | activePoint = null; |
| 100 | }; |
| 101 | |
| 102 | rightclick = function (e) { |
| 103 | e.preventDefault(); |
| 104 | if (!e.offsetX) { |
| 105 | e.offsetX = e.pageX - $(e.target).offset().left; |
| 106 | e.offsetY = e.pageY - $(e.target).offset().top; |
| 107 | } |
| 108 | var x = e.offsetX, |
| 109 | y = e.offsetY; |
| 110 | for (var i = 0; i < points.length; i += 2) { |
| 111 | dis = Math.sqrt( |
| 112 | Math.pow(x - points[i], 2) + Math.pow(y - points[i + 1], 2) |
| 113 | ); |
| 114 | if (dis < 6) { |
| 115 | points.splice(i, 2); |
| 116 | draw(); |
| 117 | record(); |
| 118 | return false; |
| 119 | } |
| 120 | } |
| 121 | return false; |
| 122 | }; |
| 123 | |
| 124 | mousedown = function (e) { |
| 125 | var x, |
| 126 | y, |
| 127 | dis, |
| 128 | lineDis, |
| 129 | insertAt = points.length; |
| 130 | |
| 131 | if (e.which === 3) { |
| 132 | return false; |
| 133 | } |
| 134 | |
| 135 | e.preventDefault(); |
| 136 | if (!e.offsetX) { |
| 137 | e.offsetX = e.pageX - $(e.target).offset().left; |
| 138 | e.offsetY = e.pageY - $(e.target).offset().top; |
| 139 | } |
| 140 | x = e.offsetX; |
| 141 | y = e.offsetY; |
| 142 | |
| 143 | if (points.length >= 6) { |
| 144 | var c = getCenter(); |
| 145 | ctx.fillRect(c.x - 4, c.y - 4, 8, 8); |
| 146 | dis = Math.sqrt(Math.pow(x - c.x, 2) + Math.pow(y - c.y, 2)); |
| 147 | if (dis < 6) { |
| 148 | startpoint = false; |
| 149 | $(this).on("mousemove", moveall); |
| 150 | return false; |
| 151 | } |
| 152 | } |
| 153 | |
| 154 | for (var i = 0; i < points.length; i += 2) { |
| 155 | dis = Math.sqrt( |
| 156 | Math.pow(x - points[i], 2) + Math.pow(y - points[i + 1], 2) |
| 157 | ); |
| 158 | if (dis < 6) { |
| 159 | activePoint = i; |
| 160 | $(this).on("mousemove", move); |
| 161 | return false; |
| 162 | } |
| 163 | } |
| 164 | |
| 165 | for (var i = 0; i < points.length; i += 2) { |
| 166 | if (i > 1) { |
| 167 | lineDis = dotLineLength( |
| 168 | x, |
| 169 | y, |
| 170 | points[i], |
| 171 | points[i + 1], |
| 172 | points[i - 2], |
| 173 | points[i - 1], |
| 174 | true |
| 175 | ); |
| 176 | if (lineDis < 6) { |
| 177 | insertAt = i; |
| 178 | } |
| 179 | } |
| 180 | } |
| 181 | |
| 182 | points.splice(insertAt, 0, Math.round(x), Math.round(y)); |
| 183 | activePoint = insertAt; |
| 184 | $(this).on("mousemove", move); |
| 185 | |
| 186 | draw(); |
| 187 | record(); |
| 188 | |
| 189 | return false; |
| 190 | }; |
| 191 | |
| 192 | draw = function () { |
| 193 | ctx.canvas.width = ctx.canvas.width; |
| 194 | |
| 195 | record(); |
| 196 | if (points.length < 2) { |
| 197 | return; |
| 198 | } |
| 199 | ctx.globalCompositeOperation = "destination-over"; |
| 200 | ctx.fillStyle = "rgb(255,255,255)"; |
| 201 | ctx.strokeStyle = "rgb(255,20,20)"; |
| 202 | ctx.lineWidth = 1; |
| 203 | if (points.length >= 6) { |
| 204 | var c = getCenter(); |
| 205 | ctx.fillRect(c.x - 4, c.y - 4, 8, 8); |
| 206 | } |
| 207 | ctx.beginPath(); |
| 208 | ctx.moveTo(points[0], points[1]); |
| 209 | for (var i = 0; i < points.length; i += 2) { |
| 210 | ctx.fillRect(points[i] - 2, points[i + 1] - 2, 4, 4); |
| 211 | ctx.strokeRect(points[i] - 2, points[i + 1] - 2, 4, 4); |
| 212 | if (points.length > 2 && i > 1) { |
| 213 | ctx.lineTo(points[i], points[i + 1]); |
| 214 | } |
| 215 | } |
| 216 | ctx.closePath(); |
| 217 | ctx.fillStyle = "rgba(255,0,0,0.3)"; |
| 218 | ctx.fill(); |
| 219 | ctx.stroke(); |
| 220 | }; |
| 221 | |
| 222 | record = function () { |
| 223 | $(input).val(points.join(",")); |
| 224 | }; |
| 225 | |
| 226 | getCenter = function () { |
| 227 | var ptc = []; |
| 228 | for (i = 0; i < points.length; i++) { |
| 229 | ptc.push({ x: points[i], y: points[++i] }); |
| 230 | } |
| 231 | var first = ptc[0], |
| 232 | last = ptc[ptc.length - 1]; |
| 233 | if (first.x != last.x || first.y != last.y) ptc.push(first); |
| 234 | var twicearea = 0, |
| 235 | x = 0, |
| 236 | y = 0, |
| 237 | nptc = ptc.length, |
| 238 | p1, |
| 239 | p2, |
| 240 | f; |
| 241 | for (var i = 0, j = nptc - 1; i < nptc; j = i++) { |
| 242 | p1 = ptc[i]; |
| 243 | p2 = ptc[j]; |
| 244 | f = p1.x * p2.y - p2.x * p1.y; |
| 245 | twicearea += f; |
| 246 | x += (p1.x + p2.x) * f; |
| 247 | y += (p1.y + p2.y) * f; |
| 248 | } |
| 249 | f = twicearea * 3; |
| 250 | return { x: x / f, y: y / f }; |
| 251 | }; |
| 252 | |
| 253 | $(input).on("change", function () { |
| 254 | var v = $(input) |
| 255 | .val() |
| 256 | .replace(/[^0-9\,]/gi, ""); |
| 257 | if (v.length) { |
| 258 | points = v.split(",").map(function (point) { |
| 259 | return parseInt(point, 10); |
| 260 | }); |
| 261 | } else { |
| 262 | points = []; |
| 263 | } |
| 264 | draw(); |
| 265 | }); |
| 266 | |
| 267 | $(document).find(".isimb-6310-clear").click(reset); |
| 268 | $(document).find($canvas).on("mousedown", mousedown); |
| 269 | $(document).find($canvas).on("contextmenu", rightclick); |
| 270 | $(document).find($canvas).on("mouseup", stopdrag); |
| 271 | }; |
| 272 | |
| 273 | var dotLineLength = function (x, y, x0, y0, x1, y1, o) { |
| 274 | function lineLength(x, y, x0, y0) { |
| 275 | return Math.sqrt((x -= x0) * x + (y -= y0) * y); |
| 276 | } |
| 277 | |
| 278 | if ( |
| 279 | o && |
| 280 | !((o = (function (x, y, x0, y0, x1, y1) { |
| 281 | if (!(x1 - x0)) return { x: x0, y: y }; |
| 282 | else if (!(y1 - y0)) return { x: x, y: y0 }; |
| 283 | var left, |
| 284 | tg = -1 / ((y1 - y0) / (x1 - x0)); |
| 285 | return { |
| 286 | x: (left = |
| 287 | (x1 * (x * tg - y + y0) + x0 * (x * -tg + y - y1)) / |
| 288 | (tg * (x1 - x0) + y0 - y1)), |
| 289 | y: tg * left - tg * x + y, |
| 290 | }; |
| 291 | })(x, y, x0, y0, x1, y1)), |
| 292 | o.x >= Math.min(x0, x1) && |
| 293 | o.x <= Math.max(x0, x1) && |
| 294 | o.y >= Math.min(y0, y1) && |
| 295 | o.y <= Math.max(y0, y1)) |
| 296 | ) { |
| 297 | var l1 = lineLength(x, y, x0, y0), |
| 298 | l2 = lineLength(x, y, x1, y1); |
| 299 | return l1 > l2 ? l2 : l1; |
| 300 | } else { |
| 301 | var a = y0 - y1, |
| 302 | b = x1 - x0, |
| 303 | c = x0 * y1 - y0 * x1; |
| 304 | return Math.abs(a * x + b * y + c) / Math.sqrt(a * a + b * b); |
| 305 | } |
| 306 | }; |
| 307 | })(jQuery); |
| 308 |