123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- // https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
- export default {
- methods: {
- deg2rad (deg) {
- return deg * (Math.PI / 180)
- },
- rad2deg (rad) {
- return rad * (180 / Math.PI)
- },
- createLabelCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) {
- // console.log('createLabelCanvas', this.data.Titre)
- const size = fontsize
- const borderSize = 5
- let lines = text.split('\n')
- const ctx = document.createElement('canvas').getContext('2d')
- const font = `${size}px bold noto_sans,sans-serif`
- ctx.font = font
- // measure how long the name will be
- const doubleBorderSize = borderSize * 2
- let width = 0
- for (var i = 0; i < lines.length; i++) {
- width = Math.max(width, ctx.measureText(lines[i]).width + doubleBorderSize)
- }
- const height = size * lines.length + doubleBorderSize
- this.label_size = { x: width / sizefactore, y: height / sizefactore }
- ctx.canvas.width = width
- ctx.canvas.height = height
- // need to set font again after resizing canvas
- ctx.font = font
- ctx.textBaseline = 'top'
- if (bgcolor) {
- ctx.fillStyle = bgcolor
- ctx.fillRect(0, 0, width, height)
- }
- ctx.fillStyle = txtcolor
- for (var j = 0; j < lines.length; j++) {
- ctx.fillText(lines[j], borderSize, borderSize + j * size)
- }
- // console.log('createLabelCanvas', ctx)
- return ctx.canvas
- },
- createImgCanvas (src) {
- // let vnode = this
- return new Promise((resolve, reject) => {
- var img = new Image()
- // XSS resolution
- // https://www.html5gamedevs.com/topic/31184-solved-cors-problem-with-dynamictexture-on-some-servers-tainted-canvas/
- img.crossOrigin = 'Anonymous'
- img.src = src
- img.onload = function () {
- // console.log('img loaded', this)
- const ctx = document.createElement('canvas').getContext('2d')
- ctx.canvas.width = this.width
- ctx.canvas.height = this.height
- ctx.fillStyle = 'red'
- // ctx.fillRect(0, 0, this.width, this.height)
- ctx.drawImage(this, 0, 0, this.width, this.height)
- resolve({ img: this, canvas: ctx.canvas })
- }
- img.onerror = function () {
- reject(src)
- }
- })
- }
- // createGradientCanvas (c1, c2) {
- // var ctx = document.createElement('canvas').getContext('2d')
- // ctx.canvas.width = 1024
- // ctx.canvas.height = 1024
- // var lingrad = ctx.createLinearGradient(0, 0, 0, 1024)
- // lingrad.addColorStop(0, c1)
- // lingrad.addColorStop(1, c2)
- // ctx.fillStyle = lingrad
- // ctx.fillRect(0, 0, 1024, 1024)
- // return ctx.canvas
- // }
- // ,
- // /**
- // * Converts an HSL color value to RGB. Conversion formula
- // * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
- // * Assumes h, s, and l are contained in the set [0, 1] and
- // * returns r, g, and b in the set [0, 255].
- // *
- // * @param {number} h The hue
- // * @param {number} s The saturation
- // * @param {number} l The lightness
- // * @return {Array} The RGB representation
- // */
- // hslToRgb (h, s, l) {
- // var r, g, b
- //
- // if (s === 0) {
- // r = g = b = l // achromatic
- // } else {
- // var hue2rgb = function hue2rgb (p, q, t) {
- // if (t < 0) t += 1
- // if (t > 1) t -= 1
- // if (t < 1 / 6) return p + (q - p) * 6 * t
- // if (t < 1 / 2) return q
- // if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
- // return p
- // }
- //
- // var q = l < 0.5 ? l * (1 + s) : l + s - l * s
- // var p = 2 * l - q
- // r = hue2rgb(p, q, h + 1 / 3)
- // g = hue2rgb(p, q, h)
- // b = hue2rgb(p, q, h - 1 / 3)
- // }
- //
- // return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
- // }
- }
- }
|