Skip to content

Commit

Permalink
fix: Change the param of AnnotationView from color to stroke
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kerwin-L
Kerwin-L committed Dec 29, 2021
1 parent 484395e commit 027ced8
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 42 deletions.
57 changes: 35 additions & 22 deletions packages/lb-annotation/src/core/toolOperation/ViewOperation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ import { DEFAULT_TEXT_SHADOW, DEFAULT_TEXT_OFFSET, TEXT_ATTRIBUTE_OFFSET } from
const newScope = 3;

interface IBasicStyle {
color?: string; // 用于当前图形的颜色的特殊设置
stroke?: string; // 边框颜色
fill?: string; // 填充颜色
thickness?: number; // 当前图形宽度
}

interface IGraphicsBasicConfig extends IBasicStyle {
hiddenText?: boolean; // 是否隐藏文本
isReference?: boolean; // 是否进行的参考显示
}
Expand All @@ -29,15 +31,15 @@ interface IAnnotationData {
annotation: IBasicRect & IBasicPolygon & IBasicLine & IPoint & IBasicText;
}

interface IBasicRect extends IBasicStyle {
interface IBasicRect extends IGraphicsBasicConfig {
id: string;
x: number;
y: number;
width: number;
height: number;
}

interface IBasicPolygon extends IBasicStyle {
interface IBasicPolygon extends IGraphicsBasicConfig {
id: string;
pointList: IPoint[];
showDirection?: boolean;
Expand All @@ -59,7 +61,7 @@ interface IBasicText {
font?: string; // canvas-font https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font
}

interface IPoint extends IBasicStyle {
interface IPoint extends IGraphicsBasicConfig {
x: number;
y: number;
radius?: number;
Expand All @@ -71,6 +73,7 @@ type IViewOperationProps = {
} & IBasicToolOperationProps;

const DEFAULT_RADIUS = 3;
const DEFAULT_STROKE_COLOR = '#6371FF';

export default class ViewOperation extends BasicToolOperation {
public style: IBasicStyle = {};
Expand All @@ -83,7 +86,7 @@ export default class ViewOperation extends BasicToolOperation {

constructor(props: IViewOperationProps) {
super({ ...props, showDefaultCursor: true });
this.style = props.style ?? { color: '#6371FF', thickness: 1 };
this.style = props.style ?? { stroke: DEFAULT_STROKE_COLOR, thickness: 3 };
this.annotations = props.annotations;
this.loading = false;
}
Expand Down Expand Up @@ -195,11 +198,21 @@ export default class ViewOperation extends BasicToolOperation {
* @returns
*/
private getSpecificStyle(obj: { [a: string]: any }) {
const specificStyle = _.pick(obj, ['color', 'thickness', 'fill', 'radius']);
return {
const specificStyle = _.pick(obj, ['stroke', 'thickness', 'fill', 'radius']);

const newStyle = {
...this.style,
...specificStyle,
};

if (newStyle.stroke) {
// 兼容下方默认值 color 的携带
Object.assign(newStyle, {
color: newStyle.stroke,
});
}

return newStyle;
}

/**
Expand Down Expand Up @@ -263,7 +276,7 @@ export default class ViewOperation extends BasicToolOperation {
const style = this.getSpecificStyle(rect);

if (rect.id === this.mouseHoverID || style.fill) {
const fillArr = rgba(style.color);
const fillArr = rgba(style?.fill ?? style?.stroke ?? DEFAULT_STROKE_COLOR);
const fill = `rgba(${fillArr[0]}, ${fillArr[1]}, ${fillArr[2]},${fillArr[3] * 0.8})`;
DrawUtils.drawRectWithFill(this.canvas, renderRect, { color: fill }); // color 看后续是否要改 TODO
}
Expand All @@ -279,7 +292,7 @@ export default class ViewOperation extends BasicToolOperation {
if (headerText) {
// 框体上方展示
DrawUtils.drawText(this.canvas, { x, y: y - 6 }, headerText, {
color: style.color,
color: style.stroke,
font: 'normal normal 900 14px SourceHanSansCN-Regular',
...DEFAULT_TEXT_SHADOW,
textMaxWidth: 300,
Expand All @@ -291,7 +304,7 @@ export default class ViewOperation extends BasicToolOperation {
const textSizeWidth = rectSize.length * 7;
if (!hiddenText) {
DrawUtils.drawText(this.canvas, { x: x + width - textSizeWidth, y: y + height + 15 }, rectSize, {
color: style.color,
color: style.stroke,
font: 'normal normal 600 14px Arial',
...DEFAULT_TEXT_SHADOW,
});
Expand All @@ -301,7 +314,7 @@ export default class ViewOperation extends BasicToolOperation {
const marginTop = 20;
const textWidth = Math.max(20, width - textSizeWidth);
DrawUtils.drawText(this.canvas, { x, y: y + height + marginTop }, rect.textAttribute, {
color: style.color,
color: style.stroke,
font: 'italic normal 900 14px Arial',
textMaxWidth: textWidth,
...DEFAULT_TEXT_SHADOW,
Expand All @@ -315,7 +328,7 @@ export default class ViewOperation extends BasicToolOperation {
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.color);
const fillArr = rgba(style?.fill ?? style?.stroke ?? DEFAULT_STROKE_COLOR);
const fill = `rgba(${fillArr[0]}, ${fillArr[1]}, ${fillArr[2]},${fillArr[3] * 0.8})`;
DrawUtils.drawPolygonWithFill(this.canvas, renderPolygon, { color: fill });
}
Expand All @@ -334,20 +347,20 @@ export default class ViewOperation extends BasicToolOperation {
renderPolygon[0],
MathUtils.getLineCenterPoint([renderPolygon[0], renderPolygon[1]]),
{
color: style.color,
color: style.stroke,
thickness: style.thickness,
},
);
DrawUtils.drawCircleWithFill(this.canvas, renderPolygon[0], style.thickness + 2, {
color: style.color,
color: style.stroke,
});
}

// 文本渲染
const { headerText, bottomText } = this.getRenderText(polygon, polygon?.hiddenText);
if (headerText) {
DrawUtils.drawText(this.canvas, renderPolygon[0], headerText, {
color: style.color,
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
});
}
Expand All @@ -359,7 +372,7 @@ export default class ViewOperation extends BasicToolOperation {
{ x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y },
bottomText,
{
color: style.color,
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
},
);
Expand All @@ -384,20 +397,20 @@ export default class ViewOperation extends BasicToolOperation {
renderLine[0],
MathUtils.getLineCenterPoint([renderLine[0], renderLine[1]]),
{
color: style.color,
color: style.stroke,
thickness: style.thickness,
},
);
DrawUtils.drawCircleWithFill(this.canvas, renderLine[0], style.thickness + 2, {
color: style.color,
color: style.stroke,
});
}

// 文本渲染
const { headerText, bottomText } = this.getRenderText(line, line?.hiddenText);
if (headerText) {
DrawUtils.drawText(this.canvas, renderLine[0], headerText, {
color: style.color,
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
});
}
Expand All @@ -409,7 +422,7 @@ export default class ViewOperation extends BasicToolOperation {
{ x: endPoint.x + TEXT_ATTRIBUTE_OFFSET.x, y: endPoint.y + TEXT_ATTRIBUTE_OFFSET.y },
bottomText,
{
color: style.color,
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
},
);
Expand All @@ -435,13 +448,13 @@ export default class ViewOperation extends BasicToolOperation {
headerText,
{
textAlign: 'center',
color: style.color,
color: style.stroke,
},
);
}
if (bottomText) {
DrawUtils.drawText(this.canvas, { x: renderPoint.x + radius, y: renderPoint.y + radius + 24 }, bottomText, {
color: style.color,
color: style.stroke,
...DEFAULT_TEXT_OFFSET,
});
}
Expand Down
16 changes: 10 additions & 6 deletions packages/lb-components/docs/annotationView.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,33 +46,37 @@ interface ISize {
}

interface IBasicStyle {
color?: string;
fill?: string;
thickness?: number;
stroke?: string; // 边框颜色
fill?: string; // 填充颜色
thickness?: number; // 边框厚度
}

interface IGraphicsBasicConfig extends IBasicStyle {
hiddenText?: boolean;
isReference?: boolean;
}

interface IAnnotationData {
type: 'rect' | 'polygon' | 'line' | 'point';
annotation: IBasicRect & IBasicPolygon & IBasicLine & IPoint;
}

interface IBasicRect extends IBasicStyle {
interface IBasicRect extends IGraphicsBasicConfig {
id: string;
x: number;
y: number;
width: number;
height: number;
}

interface IBasicPolygon extends IBasicStyle {
interface IBasicPolygon extends IGraphicsBasicConfig {
id: string;
pointList: IPoint[];
}

type IBasicLine = IBasicPolygon;

interface IPoint extends IBasicStyle {
interface IPoint extends IGraphicsBasicConfig {
x: number;
y: number;
radius?: number;
Expand Down
14 changes: 9 additions & 5 deletions packages/lb-components/docs/annotationView_en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,33 +45,37 @@ interface ISize {
}

interface IBasicStyle {
color?: string;
fill?: string;
stroke?: string; // border color
fill?: string; // fill color
thickness?: number;
}

interface IGraphicsBasicConfig extends IBasicStyle {
hiddenText?: boolean;
isReference?: boolean;
}

interface IAnnotationData {
type: 'rect' | 'polygon' | 'line' | 'point';
annotation: IBasicRect & IBasicPolygon & IBasicLine & IPoint;
}

interface IBasicRect extends IBasicStyle {
interface IBasicRect extends IGraphicsBasicConfig {
id: string;
x: number;
y: number;
width: number;
height: number;
}

interface IBasicPolygon extends IBasicStyle {
interface IBasicPolygon extends IGraphicsBasicConfig {
id: string;
pointList: IPoint[];
}

type IBasicLine = IBasicPolygon;

interface IPoint extends IBasicStyle {
interface IPoint extends IGraphicsBasicConfig {
x: number;
y: number;
radius?: number;
Expand Down
4 changes: 2 additions & 2 deletions packages/lb-components/src/components/AnnotationView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ const AnnotationView = (props: IProps, ref: any) => {
src,
annotations = [],
style = {
color: 'blue',
thickness: 5,
stroke: 'blue',
thickness: 3,
},
zoomChange,
backgroundStyle = {},
Expand Down
4 changes: 2 additions & 2 deletions packages/lb-demo/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ const App = () => {
src='https://cdn.nba.com/manage/2020/10/andre-iguodala-iso-smile-0520-784x588.jpg'
annotations={DEFAULT_ANNOTATIONS}
style={{
color: 'blue',
thickness: 5,
stroke: 'blue',
thickness: 3,
}}
/>
</div>
Expand Down
9 changes: 4 additions & 5 deletions packages/lb-demo/src/mock/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const DEFAULT_ANNOTATIONS = [
y: 23,
width: 100,
height: 100,
color: 'pink',
stroke: 'pink',
// thickness: 10,
},
},
Expand All @@ -99,7 +99,7 @@ export const DEFAULT_ANNOTATIONS = [
annotation: {
id: '3',
// thickness: 10,
color: 'green',
stroke: 'green',
pointList: [
{
x: 12,
Expand All @@ -119,10 +119,9 @@ export const DEFAULT_ANNOTATIONS = [
{
type: 'line',
annotation: {
color: 'yellow',
stroke: 'yellow',
thickness: 5,
id: '4',

pointList: [
{
x: 123,
Expand All @@ -146,7 +145,7 @@ export const DEFAULT_ANNOTATIONS = [
x: 10,
y: 10,
fill: 'green',
color: 'blue',
stroke: 'blue',
thickness: '20',
radius: 10,
},
Expand Down

0 comments on commit 027ced8

Please sign in to comment.