/** * A sprite that represents a line. * * @example * Ext.create({ * xtype: 'draw', * renderTo: document.body, * width: 600, * height: 400, * sprites: [{ * type: 'line', * fromX: 20, * fromY: 20, * toX: 120, * toY: 120, * strokeStyle: '#1F6D91', * lineWidth: 3 * }] * }); */Ext.define('Ext.draw.sprite.Line', { extend: 'Ext.draw.sprite.Sprite', alias: 'sprite.line', type: 'line', inheritableStatics: { def: { processors: { fromX: 'number', fromY: 'number', toX: 'number', toY: 'number', crisp: 'bool' }, defaults: { fromX: 0, fromY: 0, toX: 1, toY: 1, crisp: false, strokeStyle: 'black' }, aliases: { x1: 'fromX', y1: 'fromY', x2: 'toX', y2: 'toY' }, triggers: { crisp: 'bbox' } } }, updateLineBBox: function(bbox, isTransform, x1, y1, x2, y2) { var attr = this.attr, matrix = attr.matrix, halfLineWidth = attr.lineWidth / 2, fromX, fromY, toX, toY, p, angle, sin, cos, dx, dy; if (attr.crisp) { x1 = this.align(x1); x2 = this.align(x2); y1 = this.align(y1); y2 = this.align(y2); } if (isTransform) { p = matrix.transformPoint([x1, y1]); x1 = p[0]; y1 = p[1]; p = matrix.transformPoint([x2, y2]); x2 = p[0]; y2 = p[1]; } fromX = Math.min(x1, x2); toX = Math.max(x1, x2); fromY = Math.min(y1, y2); toY = Math.max(y1, y2); angle = Math.atan2(toX - fromX, toY - fromY); sin = Math.sin(angle); cos = Math.cos(angle); dx = halfLineWidth * cos; dy = halfLineWidth * sin; // Offset start and end points of the line by half its thickness, // while accounting for line's angle. fromX -= dx; fromY -= dy; toX += dx; toY += dy; bbox.x = fromX; bbox.y = fromY; bbox.width = toX - fromX; bbox.height = toY - fromY; }, updatePlainBBox: function(plain) { var attr = this.attr; this.updateLineBBox(plain, false, attr.fromX, attr.fromY, attr.toX, attr.toY); }, updateTransformedBBox: function(transform, plain) { var attr = this.attr; this.updateLineBBox(transform, true, attr.fromX, attr.fromY, attr.toX, attr.toY); }, align: function(x) { return Math.round(x) - 0.5; }, render: function(surface, ctx) { var me = this, attr = me.attr, matrix = attr.matrix; matrix.toContext(ctx); ctx.beginPath(); if (attr.crisp) { ctx.moveTo(me.align(attr.fromX), me.align(attr.fromY)); ctx.lineTo(me.align(attr.toX), me.align(attr.toY)); } else { ctx.moveTo(attr.fromX, attr.fromY); ctx.lineTo(attr.toX, attr.toY); } ctx.stroke(); //<debug> // eslint-disable-next-line vars-on-top var debug = attr.debug || this.statics().debug || Ext.draw.sprite.Sprite.debug; if (debug) { // This assumes no part of the sprite is rendered after this call. // If it is, we need to re-apply transformations. // But the bounding box should always be rendered as is, untransformed. this.attr.inverseMatrix.toContext(ctx); if (debug.bbox) { this.renderBBox(surface, ctx); } } //</debug> }});