Skip to content

Commit

Permalink
feat: [lb-annotation]: ViewOperation supporting font rendering style
Browse files Browse the repository at this point in the history
  • Loading branch information
lijingchi committed Aug 12, 2022
1 parent 85c82a2 commit ab34731
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 56 deletions.
8 changes: 4 additions & 4 deletions packages/lb-annotation/src/constant/annotation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,10 +74,10 @@ export const DEFAULT_TEXT_OFFSET = {
* 默认文本阴影
*/
export const DEFAULT_TEXT_SHADOW = {
shadowColor: 'rgba(0,0,0,0.6)',
shadowOffsetX: 0,
shadowOffsetY: 2,
shadowBlur: 4,
shadowColor: 'rgba(0, 0, 0, 1)',
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 0,
};

// 文本展示的偏移
Expand Down
94 changes: 55 additions & 39 deletions packages/lb-annotation/src/core/toolOperation/ViewOperation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,18 @@ type IViewOperationProps = {
annotations: IAnnotationData[];
} & IBasicToolOperationProps;

export interface ISpecificStyle {
stroke: string;
thickness: number;
fill: string;
radius: number;
}

export interface IFontStyle {
fontFamily: string;
fontSize: number;
}

export default class ViewOperation extends BasicToolOperation {
public style: IBasicStyle = {};

Expand Down Expand Up @@ -169,6 +181,29 @@ export default class ViewOperation extends BasicToolOperation {
return newStyle;
}

/**
* Get font rendering style
* @param obj
* @param style
* @returns
*/
private getFontStyle(obj: { [a: string]: any }, style: ISpecificStyle) {
const fontSize = obj?.fontSize ?? 14;
const fontFamily = obj?.fontFamily ?? 'Arial';
return {
...DEFAULT_TEXT_SHADOW,
color: style.stroke,
font: `normal normal 600 ${fontSize}px ${fontFamily}`,
};
}

/**
* Append Draw offset
*/
public appendOffset({ x, y }: ICoordinate) {
return { x: x + DEFAULT_TEXT_OFFSET.offsetX, y: y + DEFAULT_TEXT_OFFSET.offsetY };
}

/**
* 获取当前展示的文本
* @param result
Expand Down Expand Up @@ -223,6 +258,9 @@ export default class ViewOperation extends BasicToolOperation {
);

this.annotations.forEach((annotation) => {
const style = this.getSpecificStyle(annotation.annotation);
const fontStyle = this.getFontStyle(annotation.annotation, style);

switch (annotation.type) {
case 'rect': {
const rect: any = annotation.annotation;
Expand All @@ -231,7 +269,6 @@ export default class ViewOperation extends BasicToolOperation {
const renderRect = AxisUtils.changeRectByZoom(rect, this.zoom, this.currentPos);

const { x, y, width, height } = renderRect;
const style = this.getSpecificStyle(rect);

if (rect.id === this.mouseHoverID || style.fill) {
const fillArr = rgba(style?.fill ?? style?.stroke ?? DEFAULT_STROKE_COLOR);
Expand All @@ -250,32 +287,29 @@ export default class ViewOperation extends BasicToolOperation {
if (headerText) {
// 框体上方展示
DrawUtils.drawText(this.canvas, { x, y: y - 6 }, headerText, {
color: style.stroke,
font: 'normal normal 900 14px SourceHanSansCN-Regular',
...DEFAULT_TEXT_SHADOW,
textMaxWidth: 300,
...fontStyle,
});
}

// 框大小数值显示
const rectSize = `${Math.round(width / zoom)} * ${Math.round(height / zoom)}`;
const textSizeWidth = rectSize.length * 7;
if (!hiddenText) {
DrawUtils.drawText(this.canvas, { x: x + width - textSizeWidth, y: y + height + 15 }, rectSize, {
color: style.stroke,
font: 'normal normal 600 14px Arial',
...DEFAULT_TEXT_SHADOW,
});
DrawUtils.drawText(
this.canvas,
{ x: x + width - textSizeWidth, y: y + height + 15 },
rectSize,
fontStyle,
);
}

if (bottomText) {
const marginTop = 20;
const textWidth = Math.max(20, width - textSizeWidth);
DrawUtils.drawText(this.canvas, { x, y: y + height + marginTop }, rect.textAttribute, {
color: style.stroke,
font: 'italic normal 900 14px Arial',
textMaxWidth: textWidth,
...DEFAULT_TEXT_SHADOW,
...fontStyle,
});
}

Expand All @@ -289,7 +323,6 @@ export default class ViewOperation extends BasicToolOperation {

const { lineType = ELineTypes.Line } = polygon;
const renderPolygon = AxisUtils.changePointListByZoom(polygon?.pointList ?? [], this.zoom, this.currentPos);
const style = this.getSpecificStyle(polygon);
if (polygon.id === this.mouseHoverID || style.fill) {
const fillArr = rgba(style?.fill ?? style?.stroke ?? DEFAULT_STROKE_COLOR);
const fill = `rgba(${fillArr[0]}, ${fillArr[1]}, ${fillArr[2]},${fillArr[3] * 0.8})`;
Expand Down Expand Up @@ -338,22 +371,16 @@ export default class ViewOperation extends BasicToolOperation {
// 文本渲染
const { headerText, bottomText } = this.getRenderText(polygon, polygon?.hiddenText);
if (headerText) {
DrawUtils.drawText(this.canvas, renderPolygon[0], headerText, {
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
});
DrawUtils.drawText(this.canvas, this.appendOffset(renderPolygon[0]), headerText, fontStyle);
}
if (bottomText) {
const endPoint = renderPolygon[renderPolygon.length - 1];

DrawUtils.drawText(
this.canvas,
{ x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y },
this.appendOffset({ x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y }),
bottomText,
{
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
},
fontStyle,
);
}

Expand All @@ -373,7 +400,6 @@ export default class ViewOperation extends BasicToolOperation {
this.currentPos,
);

const style = this.getSpecificStyle(line);
const newPointList = DrawUtils.drawPolygon(this.canvas, renderLine, {
...style,
...this.getReferenceOptions(line?.isReference),
Expand Down Expand Up @@ -405,22 +431,16 @@ export default class ViewOperation extends BasicToolOperation {
// 文本渲染
const { headerText, bottomText } = this.getRenderText(line, line?.hiddenText);
if (headerText) {
DrawUtils.drawText(this.canvas, renderLine[0], headerText, {
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
});
DrawUtils.drawText(this.canvas, this.appendOffset(renderLine[0]), headerText, fontStyle);
}
if (bottomText) {
const endPoint = renderLine[renderLine.length - 1];

DrawUtils.drawText(
this.canvas,
{ x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y },
this.appendOffset({ x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y }),
bottomText,
{
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
},
fontStyle,
);
}
break;
Expand All @@ -430,7 +450,6 @@ export default class ViewOperation extends BasicToolOperation {
const point = annotation.annotation;

const renderPoint = AxisUtils.changePointByZoom(point, this.zoom, this.currentPos);
const style = this.getSpecificStyle(point);

const radius = style.radius ?? DEFAULT_RADIUS;
DrawUtils.drawCircle(this.canvas, renderPoint, radius, style);
Expand All @@ -444,19 +463,16 @@ export default class ViewOperation extends BasicToolOperation {
headerText,
{
textAlign: 'center',
color: style.stroke,
...fontStyle,
},
);
}
if (bottomText) {
DrawUtils.drawText(
this.canvas,
{ x: renderPoint.x + radius, y: renderPoint.y + radius + 24 },
this.appendOffset({ x: renderPoint.x + radius, y: renderPoint.y + radius + 24 }),
bottomText,
{
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
},
fontStyle,
);
}
break;
Expand Down
28 changes: 15 additions & 13 deletions packages/lb-annotation/src/utils/tool/DrawUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,20 @@ const DEFAULT_CURRENT_POS = {
const DEFAULT_ROTATE = 0;
const DEFAULT_COLOR = '';

export interface IDrawTextConfig {
color: string;
font: string;
shadowColor: string;
shadowOffsetX: number;
shadowOffsetY: number;
shadowBlur: number;
textMaxWidth: number;
offsetX: number;
offsetY: number;
textAlign: 'start' | 'center' | 'end' | 'left' | 'right';
lineHeight: number;
}

export default class DrawUtils {
public static drawImg = (
canvas: HTMLCanvasElement,
Expand Down Expand Up @@ -557,19 +571,7 @@ export default class DrawUtils {
canvas: HTMLCanvasElement,
startPoint: IPoint | IPolygonPoint,
text: string,
options: Partial<{
color: string;
font: string;
shadowColor: string;
shadowOffsetX: number;
shadowOffsetY: number;
shadowBlur: number;
textMaxWidth: number;
offsetX: number;
offsetY: number;
textAlign: 'start' | 'center' | 'end' | 'left' | 'right';
lineHeight: number;
}> = {},
options: Partial<IDrawTextConfig> = {},
): void {
if (!text) {
return;
Expand Down

0 comments on commit ab34731

Please sign in to comment.