8000 feat: arc label supports new position `inside-inner` and `inside-outer` by zamhown · Pull Request #542 · VisActor/VRender · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat: arc label supports new position inside-inner and inside-outer #542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 27, 2023
Merged

feat: arc label supports new position inside-inner and inside-outer #542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/vrender-components/__tests__/browser/examples/label-arc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1152,7 +1152,7 @@ const latestData = [
// VGRAMMAR_DATA_ID_KEY_16: 0
},
{
type: 'silicon',
type: 'silicon11111111',
value: '27.72',
__VCHART_DEFAULT_DATA_INDEX: 1,
__VCHART_DEFAULT_DATA_KEY: 'silicon_silicon_0',
Expand Down Expand Up @@ -1287,7 +1287,7 @@ function createContent(stage: Stage) {
height: 500,
// position: 'outside',

position: 'inside',
position: 'inside-outer',

textStyle: {
// angle: 0
Expand All @@ -1306,7 +1306,7 @@ function createContent(stage: Stage) {
tangentConstraint: false
},

// centerOffset: 10,
offsetRadius: -50,

// smartInvert: false,

Expand Down
44 changes: 34 additions & 10 deletions packages/vrender-components/src/label/arc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,22 +277,30 @@ export class ArcLabel extends LabelBase<ArcLabelAttrs> {
const leftArcs = Array.from(this._arcLeft.values());
const rightArcs = Array.from(this._arcRight.values());
const arcs: ArcInfo[] = [];
if (position === 'inside') {
arcs.push(...this._layoutInsideLabels(rightArcs, attribute, currentMarks));
arcs.push(...this._layoutInsideLabels(leftArcs, attribute, currentMarks));
} else {
arcs.push(...this._layoutOutsideLabels(rightArcs, attribute, currentMarks));
arcs.push(...this._layoutOutsideLabels(leftArcs, attribute, currentMarks));
switch (position) {
case 'inside':
case 'inside-inner':
case 'inside-outer':
arcs.push(...this._layoutInsideLabels(rightArcs, attribute, currentMarks));
arcs.push(...this._layoutInsideLabels(leftArcs, attribute, currentMarks));
break;
case 'outside':
de 10000 fault:
arcs.push(...this._layoutOutsideLabels(rightArcs, attribute, currentMarks));
arcs.push(...this._layoutOutsideLabels(leftArcs, attribute, currentMarks));
break;
}
return arcs;
}

/**
* 布局内部标签
*/
private _layoutInsideLabels(arcs: ArcInfo[], attribute: any, currentMarks: any[]) {
private _layoutInsideLabels(arcs: ArcInfo[], attribute: ArcLabelAttrs, currentMarks: any[]) {
const labelConfig = attribute;
const spaceWidth = labelConfig.spaceWidth as number;
const position = labelConfig?.position ?? 'inside';
const offsetRadius = labelConfig?.offsetRadius ?? -spaceWidth;

arcs.forEach((arc: ArcInfo) => {
const { labelSize, radian } = arc;
Expand All @@ -319,8 +327,16 @@ export class ArcLabel extends LabelBase<ArcLabelAttrs> {
arc.labelText = text;
const labelWidth = Math.min(limit, arc.labelSize.width);
const align = this._computeAlign(arc, attribute);
const alignOffset = align === 'left' ? labelWidth : align === 'right' ? 0 : labelWidth / 2;
const labelRadius = outerRadius - spaceWidth - alignOffset;
let alignOffset = 0;
if (position === 'inside') {
alignOffset = align === 'left' ? labelWidth : align === 'right' ? 0 : labelWidth / 2;
}
let labelRadius;
if (position === 'inside-inner') {
labelRadius = innerRadius - offsetRadius + alignOffset;
} else {
labelRadius = outerRadius + offsetRadius - alignOffset;
}
arc.labelPosition = circlePoint(arc.circleCenter.x, arc.circleCenter.y, labelRadius, arc.middleAngle);
arc.labelLimit = labelWidth;
if (!isGreater(labelWidth, 0)) {
Expand All @@ -330,14 +346,19 @@ export class ArcLabel extends LabelBase<ArcLabelAttrs> {

// arc.angle = degrees(arc.middleAngle);
arc.angle = attribute?.textStyle?.angle ?? arc.middleAngle;
let offsetAngle = labelConfig?.offsetAngle ?? 0;
if (['inside-inner', 'inside-outer'].includes(position as string)) {
offsetAngle += Math.PI / 2;
}
arc.angle += offsetAngle;
});
return arcs;
}

/**
* 布局外部标签
*/
private _layoutOutsideLabels(arcs: ArcInfo[], attribute: any, currentMarks: any[]) {
private _layoutOutsideLabels(arcs: ArcInfo[], attribute: ArcLabelAttrs, currentMarks: any[]) {
const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
const height = center.y * 2;
const line2MinLength = attribute.line.line2MinLength as number;
Expand Down Expand Up @@ -406,6 +427,9 @@ export class ArcLabel extends LabelBase<ArcLabelAttrs> {
arc.labelVisible = false;
}
arc.angle = attribute?.textStyle?.angle ?? 0;
if (attribute?.offsetAngle) {
arc.angle += attribute.offsetAngle;
}

arc.labelLine = {
...attribute?.line
Expand Down
10 changes: 9 additions & 1 deletion packages/vrender-components/src/label/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export interface ArcLabelAttrs extends BaseLabelAttrs {
* 标签位置
* @default 'outside'
*/
position?: Functional<'inside' | 'outside'>;
position?: Functional<'inside' | 'outside' | 'inside-inner' | 'inside-outer'>;

// 画布宽度
width?: number;
Expand All @@ -305,6 +305,14 @@ export interface ArcLabelAttrs extends BaseLabelAttrs {
* 标签旋转角度
*/
angle?: number;
/**
* 标签旋转角度的偏移角度
*/
offsetAngle?: number;
/**
* 标签相对于 `outerRadius` 的径向偏移，目前仅作用于 inside 标签
*/
offsetRadius?: number;
/**
* 标签横向点对齐
*/
Expand Down
0