| 125 | } |
| 126 | |
| 127 | render(ctx, layer) { |
| 128 | if (layer.width == 0 && layer.height == 0) |
| 129 | return; |
| 130 | |
| 131 | var params = layer.params; |
| 132 | var power = params.radial_power; |
| 133 | if(power > 99){ |
| 134 | power = 99; |
| 135 | } |
| 136 | var alpha = params.alpha / 100 * 255; |
| 137 | if(power > 255){ |
| 138 | power = 255; |
| 139 | } |
| 140 | |
| 141 | var color1 = params.color_1; |
| 142 | var color2 = params.color_2; |
| 143 | var radial = params.radial; |
| 144 | |
| 145 | var color2_rgb = this.Helper.hexToRgb(color2); |
| 146 | |
| 147 | var width = layer.x + layer.width - 1; |
| 148 | var height = layer.y + layer.height - 1; |
| 149 | |
| 150 | if (radial == false) { |
| 151 | //linear |
| 152 | ctx.beginPath(); |
| 153 | ctx.rect(0, 0, config.WIDTH, config.HEIGHT); |
| 154 | var grd = ctx.createLinearGradient( |
| 155 | layer.x, layer.y, |
| 156 | width, height); |
| 157 | |
| 158 | grd.addColorStop(0, color1); |
| 159 | grd.addColorStop(1, "rgba(" + color2_rgb.r + ", " + color2_rgb.g + ", " |
| 160 | + color2_rgb.b + ", " + alpha / 255 + ")"); |
| 161 | ctx.fillStyle = grd; |
| 162 | ctx.fill(); |
| 163 | } |
| 164 | else { |
| 165 | //radial |
| 166 | var dist_x = layer.width; |
| 167 | var dist_y = layer.height; |
| 168 | var center_x = layer.x + Math.round(layer.width / 2); |
| 169 | var center_y = layer.y + Math.round(layer.height / 2); |
| 170 | var distance = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y)); |
| 171 | var radgrad = ctx.createRadialGradient( |
| 172 | center_x, center_y, distance * power / 100, |
| 173 | center_x, center_y, distance); |
| 174 | |
| 175 | radgrad.addColorStop(0, color1); |
| 176 | radgrad.addColorStop(1, "rgba(" + color2_rgb.r + ", " + color2_rgb.g + ", " |
| 177 | + color2_rgb.b + ", " + alpha / 255 + ")"); |
| 178 | ctx.fillStyle = radgrad; |
| 179 | ctx.fillRect(0, 0, config.WIDTH, config.HEIGHT); |
| 180 | } |
| 181 | } |
| 182 | |
| 183 | } |
| 184 | export default Gradient_class; |