* Draws a rounded rectangle on canvas. * * @param {CanvasRenderingContext2D} ctx * @param {Number} x * @param {Number} y * @param {Number} width * @param {Number} height * @param {Number} radius * @param {Boolean} fill
(ctx, x, y, width, height, radius, fill, stroke)
| 241 | * @param {Boolean} fill |
| 242 | */ |
| 243 | roundRect(ctx, x, y, width, height, radius, fill, stroke) { |
| 244 | x = parseInt(x); |
| 245 | y = parseInt(y); |
| 246 | width = parseInt(width); |
| 247 | height = parseInt(height); |
| 248 | if(width < 0){ |
| 249 | width = Math.abs(width); |
| 250 | x = x - width; |
| 251 | } |
| 252 | if(height < 0){ |
| 253 | height = Math.abs(height); |
| 254 | y = y - height; |
| 255 | } |
| 256 | var smaller_dimension = Math.min(width, height); |
| 257 | |
| 258 | radius = parseInt(radius); |
| 259 | if (typeof fill == 'undefined') { |
| 260 | fill = false; |
| 261 | } |
| 262 | if (typeof radius === 'undefined') { |
| 263 | radius = 0; |
| 264 | } |
| 265 | radius = Math.min(radius, width / 2, height / 2); |
| 266 | radius = Math.floor(radius); |
| 267 | |
| 268 | // Odd dimensions must draw offset half a pixel |
| 269 | if (width % 2 == 1 && config.layer.status != 'draft') { |
| 270 | x -= 0.5; |
| 271 | } |
| 272 | if (height % 2 == 1 && config.layer.status != 'draft') { |
| 273 | y -= 0.5; |
| 274 | } |
| 275 | |
| 276 | var stroke_offset = !fill && ctx.lineWidth % 2 == 1 && width > 1 && height > 1 ? 0.5 : 0; |
| 277 | |
| 278 | if (smaller_dimension < 2) fill = true; |
| 279 | |
| 280 | radius = {tl: radius, tr: radius, br: radius, bl: radius}; |
| 281 | ctx.beginPath(); |
| 282 | ctx.moveTo(x + radius.tl + stroke_offset, y + stroke_offset); |
| 283 | ctx.lineTo(x + width - radius.tr - stroke_offset, y + stroke_offset); |
| 284 | ctx.quadraticCurveTo(x + width - stroke_offset, y + stroke_offset, x + width - stroke_offset, y + radius.tr + stroke_offset); |
| 285 | ctx.lineTo(x + width - stroke_offset, y + height - radius.br - stroke_offset); |
| 286 | ctx.quadraticCurveTo(x + width - stroke_offset, y + height - stroke_offset, x + width - radius.br - stroke_offset, y + height - stroke_offset); |
| 287 | ctx.lineTo(x + radius.bl + stroke_offset, y + height - stroke_offset); |
| 288 | ctx.quadraticCurveTo(x + stroke_offset, y + height - stroke_offset, x + stroke_offset, y + height - radius.bl - stroke_offset); |
| 289 | ctx.lineTo(x + stroke_offset, y + radius.tl + stroke_offset); |
| 290 | ctx.quadraticCurveTo(x + stroke_offset, y + stroke_offset, x + radius.tl + stroke_offset, y + stroke_offset); |
| 291 | ctx.closePath(); |
| 292 | if (fill) { |
| 293 | ctx.fill(); |
| 294 | } |
| 295 | if (stroke) { |
| 296 | ctx.stroke(); |
| 297 | } |
| 298 | } |
| 299 | |
| 300 | } |