From 2c0c18a22bb52731fd98aeb34d75982d5e6512e7 Mon Sep 17 00:00:00 2001 From: simaQ Date: Thu, 2 Aug 2018 13:04:22 +0800 Subject: [PATCH] refactor: Optimize automatic position adjustment of Guide Tag. --- src/component/guide/tag.js | 101 ++++++++++++++++++------------------- 1 file changed, 49 insertions(+), 52 deletions(-) diff --git a/src/component/guide/tag.js b/src/component/guide/tag.js index 84ad47307..2404882dc 100644 --- a/src/component/guide/tag.js +++ b/src/component/guide/tag.js @@ -6,7 +6,8 @@ class Tag extends GuideBase { this.type = 'tag'; this.position = null; this.content = null; - this.direct = 'auto'; // 默认自动计算，如果用户设置了就按照用户设置的渲染 + this.direct = 'tl'; // 默认 tag 位置 + this.autoDirect = true; // 当 tag 出轨时，拉它一把，悬崖勒马 this.offsetX = 0; this.offsetY = 0; this.side = 4; // 三角标的边长 @@ -14,58 +15,54 @@ class Tag extends GuideBase { padding: 5, // tag 内边距 radius: 2, // tag 圆角 fill: '#1890FF' // tag 背景色 - }; + }; // tag 背景框样式 this.textStyle = { fontSize: 12, fill: '#fff', textAlign: 'center', textBaseline: 'middle' - }; - this.withPoint = true; + }; // 文本样式 + this.withPoint = true; // 是否带点 this.pointStyle = { fill: '#1890FF', r: 3, lineWidth: 1, stroke: '#fff' - }; + }; // 点的样式 } _getDirect(container, point, tagWidth, tagHeight) { let direct = this.direct; - if (direct === 'auto') { // 自动计算 - const side = this.side; - const canvas = container.get('canvas'); - const clientWidth = canvas.getWidth(); - const clientHeight = canvas.getHeight(); - const { x, y } = point; - - let vertical = 't'; - let horizontal = 'l'; - - if (y - side - tagHeight < 0) { - vertical = 'b'; - } - - if (vertical === 'b') { - if (y + side + tagHeight > clientHeight) { - vertical = 't'; - } - } - - const diff = vertical === 'c' ? side : 0; - if (x - diff - tagWidth < 0) { + const side = this.side; + const canvas = container.get('canvas'); + const clientWidth = canvas.get('width'); + const clientHeight = canvas.get('height'); + const { x, y } = point; + + let vertical = direct[0]; + let horizontal = direct[1]; + + // 垂直方向位置调整 + if (vertical === 't' && (y - side - tagHeight) < 0) { + vertical = 'b'; + } else if (vertical === 'b' && (y + side + tagHeight) > clientHeight) { + vertical = 't'; + } + // 水平方向位置调整 + const diff = vertical === 'c' ? side : 0; + if (horizontal === 'l' && (x - diff - tagWidth) < 0) { + horizontal = 'r'; + } else if (horizontal === 'r' && (x + diff + tagWidth) > clientWidth) { + horizontal = 'l'; + } else if (horizontal === 'c') { + if (tagWidth / 2 + x + diff > clientWidth) { + horizontal = 'l'; + } else if (x - (tagWidth / 2) - diff < 0) { horizontal = 'r'; } - if (horizontal === 'r') { - const diff = vertical === 'c' ? side : 0; - if (x + diff + tagWidth > clientWidth) { - horizontal = 'l'; - } - } - direct = vertical + horizontal; - this.direct = direct; } + direct = vertical + horizontal; return direct; } @@ -120,7 +117,7 @@ class Tag extends GuideBase { }, background) }); shapes.push(tagBg); - const direct = this._getDirect(container, position, tagWidth, tagHeight); + const direct = this.autoDirect ? this._getDirect(container, position, tagWidth, tagHeight) : this.direct; const side = this.side; let x = position.x + this.offsetX; let y = position.y + this.offsetY; @@ -128,7 +125,7 @@ class Tag extends GuideBase { const radius = Util.parsePadding(background.radius); if (direct === 'tl') { arrowPoints = [ - { x: tagWidth - side + xMin, y: tagHeight + yMin - 1 }, // 这个 1 是为了防止出现白边 + { x: tagWidth + xMin - side - 1, y: tagHeight + yMin - 1 }, // 这个 1 是为了防止出现白边 { x: tagWidth + xMin, y: tagHeight + yMin - 1 }, { x: tagWidth + xMin, y: tagHeight + side + yMin } ]; @@ -137,8 +134,8 @@ class Tag extends GuideBase { y = y - side - tagHeight; } else if (direct === 'cl') { arrowPoints = [ - { x: tagWidth + xMin - 1, y: (tagHeight - side) / 2 + yMin }, - { x: tagWidth + xMin - 1, y: (tagHeight + side) / 2 + yMin }, + { x: tagWidth + xMin - 1, y: (tagHeight - side) / 2 + yMin - 1 }, + { x: tagWidth + xMin - 1, y: (tagHeight + side) / 2 + yMin + 1 }, { x: tagWidth + side + xMin, y: tagHeight / 2 + yMin } ]; @@ -147,7 +144,7 @@ class Tag extends GuideBase { } else if (direct === 'bl') { arrowPoints = [ { x: tagWidth + xMin, y: -side + yMin }, - { x: tagWidth - side + xMin, y: yMin + 1 }, + { x: tagWidth + xMin - side - 1, y: yMin + 1 }, { x: tagWidth + xMin, y: yMin + 1 } ]; radius[1] = 0; @@ -157,40 +154,40 @@ class Tag extends GuideBase { } else if (direct === 'bc') { arrowPoints = [ { x: tagWidth / 2 + xMin, y: -side + yMin }, - { x: (tagWidth - side) / 2 + xMin, y: yMin + 1 }, - { x: (tagWidth + side) / 2 + xMin, y: yMin + 1 } + { x: (tagWidth - side) / 2 + xMin - 1, y: yMin + 1 }, + { x: (tagWidth + side) / 2 + xMin + 1, y: yMin + 1 } ]; x = x - tagWidth / 2; y = y + side; } else if (direct === 'br') { arrowPoints = [ - { x: xMin, y: -side + yMin }, + { x: xMin, y: yMin - side }, { x: xMin, y: yMin + 1 }, - { x: side + xMin, y: yMin + 1 } + { x: xMin + side + 1, y: yMin + 1 } ]; radius[0] = 0; y = y + side; } else if (direct === 'cr') { arrowPoints = [ - { x: -side + xMin, y: tagHeight / 2 + yMin }, - { x: xMin + 1, y: (tagHeight - side) / 2 + yMin }, - { x: xMin + 1, y: (tagHeight + side) / 2 + yMin } + { x: xMin - side, y: tagHeight / 2 + yMin }, + { x: xMin + 1, y: (tagHeight - side) / 2 + yMin - 1 }, + { x: xMin + 1, y: (tagHeight + side) / 2 + yMin + 1 } ]; x = x + side; y = y - tagHeight / 2; } else if (direct === 'tr') { arrowPoints = [ - { x: 0 + xMin, y: tagHeight + side + yMin }, - { x: 0 + xMin, y: tagHeight + yMin - 1 }, - { x: side + xMin, y: tagHeight + yMin - 1 } + { x: xMin, y: tagHeight + side + yMin }, + { x: xMin, y: tagHeight + yMin - 1 }, + { x: side + xMin + 1, y: tagHeight + yMin - 1 } ]; radius[3] = 0; y = y - tagHeight - side; } else if (direct === 'tc') { arrowPoints = [ - { x: (tagWidth - side) / 2 + xMin, y: tagHeight + yMin - 1 }, - { x: (tagWidth + side) / 2 + xMin, y: tagHeight + yMin - 1 }, + { x: (tagWidth - side) / 2 + xMin - 1, y: tagHeight + yMin - 1 }, + { x: (tagWidth + side) / 2 + xMin + 1, y: tagHeight + yMin - 1 }, { x: tagWidth / 2 + xMin, y: tagHeight + side + yMin } ]; x = x - tagWidth / 2;