https://deldotinteract.org/Scripts/imagePollShape.js

1function hexToRgbA(hex, a) {
2  var c;
3  if (hex == null || hex == "") return "rgba(255, 255, 255, 0);";
4  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
5    c = hex.substring(1).split("");
6    if (c.length == 3) {
7      c = [c[0], c[0], c[1], c[1], c[2], c[2]];
8    }
9    c = "0x" + c.join("");
10    return (
11      "rgba(" +
12      [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") +
13      "," +
14      a +
15      ")"
16    );
17  }
18
19  return hex;
20}
21
22var ImagePollShape = function (mapElement, pollId, callbacks, config) {
23  this.pollId = pollId;
24  this.config = config || {};
25  this.poll = this.config.poll || {};
26  this.pollContainer = $("#pluginDiv-poll-" + this.pollId);
27  this.callbacks = callbacks || { vote: function () {} };
28  this.mapElement = mapElement;
29  this._init();
30};
31
32function getShapeColor(self, color, optionId) {
33  color =
34    parseInt(self.voted, 10) == 0
35      ? color
36      : parseInt(self.voted, 10) == optionId
37      ? color
38      : "#808080";
39  return color;
40}
41
42ImagePollShape.prototype._init = function () {
43  var self = this;
44  this.voted = $(
45    "#" + CONSTANTS.CLICKABLE_SHAPES.IMAGE_SHAPE + this.pollId
46  ).attr("data-selected-optionid");
47  this.imageSource = $(
48    "#" + CONSTANTS.CLICKABLE_SHAPES.IMAGE_SHAPE + this.pollId
49  ).attr("imgSource");
50  this.shapeOptions;
51
52  $(this.mapElement).append(
53    "<canvas style='margin: auto; display: block;' align='center' id='shapeCanvas" +
54      this.pollId +
55      "' width='500' height='400'></canvas>"
56  );
57  this.canvas = $("#shapeCanvas" + this.pollId);
58
59  this.image = new Image();
60
61  this.context = this.canvas.get(0).getContext("2d");
62
63  this.image.src = this.imageSource;
64  this.image.onload = function () {
65    self.context.drawImage(self.image, 0, 0, 500, 400);
66
67    $.get(
68      "/MapFileUpload/GetOptionShapes/",
69      {
70        pollId: self.pollId
71      },
72      function (shapeOptions) {
73        self.shapeOptions = shapeOptions;
74
75        for (var i = 0, len = self.shapeOptions.length; i < len; i++) {
76          self.shapeOptions[i].boundaries = JSON.parse(
77            self.shapeOptions[i].boundaries
78          );
79          var path = {};
80          path.id = self.shapeOptions[i].optionId;
81          self.preparePath(i);
82          self.context.lineWidth = 3;
83          if (self.shapeOptions[i].outlineColor != "") {
84            self.context.strokeStyle = hexToRgbA(
85              getShapeColor(
86                self,
87                self.shapeOptions[i].outlineColor,
88                self.shapeOptions[i].optionId
89              ),
90              1
91            );
92          } else {
93            self.context.strokeStyle = hexToRgbA("#000000", 0.0);
94          }
95          self.context.fillStyle = hexToRgbA(
96            getShapeColor(
97              self,
98              self.shapeOptions[i].fillColor,
99              self.shapeOptions[i].optionId
100            ),
101            parseInt(self.voted, 10) == 0
102              ? self.shapeOptions[i].fillColor == ""
103                ? 0.0
104                : 0.25
105              : parseInt(self.voted, 10) == self.shapeOptions[i].optionId
106              ? self.shapeOptions[i].fillColor == ""
107                ? 0.0
108                : 0.25
109              : 0.4
110          );
111
112          self.context.stroke();
113          self.context.fill();
114          self.paths.push(path);
115
116          var res = new PolygonCenteringHelper(
117            self.shapeOptions[i].boundaries
118          )._calculateCenter();
119          var xText = res.x;
120          var yText = res.y;
121
122          var textSize = 20;
123          if (
124            self.shapeOptions[i].nameVisible ||
125            parseInt(self.voted, 10) != 0
126          ) {
127            self.context.fillStyle = hexToRgbA(
128              getShapeColor(
129                self,
130                self.shapeOptions[i].nameColor,
131                self.shapeOptions[i].optionId
132              ),
133              1
134            );
135            self.context.font = textSize + "px Arial";
136            var text =
137              parseInt(self.voted, 10) == 0 ||
138              (self.poll && self.poll.data && !self.poll.data.showResultStats)
139                ? self.shapeOptions[i].name
140                : Math.round(
141                    parseFloat(
142                      $(
143                        "#" +
144                          CONSTANTS.CLICKABLE_SHAPES.IMAGE_SHAPE +
145                          self.pollId
146                      ).attr(
147                        "data-percent-option" + self.shapeOptions[i].optionId
148                      )
149                    )
150                  ) + "%";
151            xText -= ((textSize / 3) * text.length) / 2;
152            self.context.fillText(text, xText, yText);
153          }
154        }
155
156        if (parseInt(self.voted, 10) == 0) {
157          self.canvas.get(0).addEventListener("mousemove", function (e) {
158            var r = this.getBoundingClientRect(),
159              x = e.clientX - r.left,
160              y = e.clientY - r.top;
161            var hitted = false;
162            // normally you would loop through your paths objects:
163            for (var i = 0, len = self.paths.length; i < len; i++) {
164              self.preparePath(i);

165              if (self.context.isPointInPath(x, y)) {
166                hitted = true;
167                if (
168                  self.activePath == null ||
169                  self.activePath.id != self.paths[i].id
170                ) {
171                  self.activePath = self.paths[i];
172                  self.redrawShapes(self.activePath);
173                }
174              }
175            }
176            if (hitted === false && self.activePath !== null) {
177              self.activePath = null;
178              self.redrawShapes(self.activePath);
179            }
180          });
181
182          self.canvas.get(0).addEventListener("click", function (e) {
183            var r = this.getBoundingClientRect(),
184              x = e.clientX - r.left,
185              y = e.clientY - r.top;
186
187            // normally you would loop through your paths objects:
188            for (var i = 0, len = self.paths.length; i < len; i++) {
189              self.preparePath(i);
190              if (self.context.isPointInPath(x, y)) {
191                self.callbacks.vote(self.paths[i].id);
192                break;
193              }
194            }
195          });
196        }
197      }
198    );
199  };
200
201  this.paths = [];
202  this.activePath = null;
203};
204
205ImagePollShape.prototype.preparePath = function (i) {
206  this.context.beginPath();
207  for (
208    var j = 0, len2 = this.shapeOptions[i].boundaries.length;
209    j < len2;
210    j++
211  ) {
212    if (j == 0)
213      this.context.moveTo(
214        this.shapeOptions[i].boundaries[j].x,
215        this.shapeOptions[i].boundaries[j].y
216      );
217    else
218      this.context.lineTo(
219        this.shapeOptions[i].boundaries[j].x,
220        this.shapeOptions[i].boundaries[j].y
221      );
222  }
223  this.context.closePath();
224};
225
226ImagePollShape.prototype.redrawShapes = function (activePath) {
227  this.context.drawImage(this.image, 0, 0, 500, 400);
228  for (var i = 0, len = this.shapeOptions.length; i < len; i++) {
229    this.preparePath(i);
230    this.context.lineWidth = 3;
231    if (this.shapeOptions[i].outlineColor != "") {
232      this.context.strokeStyle = hexToRgbA(
233        this.shapeOptions[i].outlineColor,
234        1
235      );
236    } else {
237      this.context.strokeStyle = hexToRgbA("#000000", 0.0);
238    }
239    if (this.shapeOptions[i].fillColor != "") {
240      this.context.fillStyle = hexToRgbA(
241        this.shapeOptions[i].fillColor,
242        this.activePath == null ||
243          this.activePath.id != this.shapeOptions[i].optionId
244          ? 0.25
245          : 0.1
246      );
247    } else {
248      this.context.fillStyle = hexToRgbA("#000000", 0.0);
249    }
250
251    this.context.stroke();
252    this.context.fill();
253
254    var res = new PolygonCenteringHelper(
255      this.shapeOptions[i].boundaries
256    )._calculateCenter();
257    var xText = res.x;
258    var yText = res.y;
259
260    var textSize = 20;
261    if (this.shapeOptions[i].nameVisible || parseInt(this.voted, 10) != 0) {
262      this.context.fillStyle = hexToRgbA(
263        getShapeColor(
264          this,
265          this.shapeOptions[i].nameColor,
266          this.shapeOptions[i].optionId
267        ),
268        1
269      );
270      this.context.font = textSize + "px Arial";
271      var text =
272        parseInt(this.voted, 10) == 0
273          ? this.shapeOptions[i].name
274          : $("#" + CONSTANTS.CLICKABLE_SHAPES.IMAGE_SHAPE + this.pollId).attr(
275              "data-percent-option" + this.shapeOptions[i].optionId
276            ) + "%";
277      xText -= ((textSize / 3) * text.length) / 2;
278      this.context.fillText(text, xText, yText);
279    }
280  }
281};