Skip to content

feat: Added default label function, supporting custom labels for various shapes #168

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

Open
Zixhub wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Added default label function, supporting custom labels for various shapes #168

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
20 changes: 12 additions & 8 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ export default class CanvasSelect extends EventBus {
textFillStyle = '#000';
/** 标签字符最大长度，超出使用省略号 */
labelMaxLen = 10;
/** 默认标签文本 */
defaultLabel = '';
/** 画布宽度 */
WIDTH = 0;
/** 画布高度 */
Expand Down Expand Up @@ -383,27 +385,27 @@ export default class CanvasSelect extends EventBus {
const curPoint: Point = [nx, ny];
switch (this.createType) {
case Shape.Rect:
newShape = new Rect({ coor: [curPoint, curPoint] }, this.dataset.length);
newShape = new Rect({ coor: [curPoint, curPoint], label: this.defaultLabel }, this.dataset.length);
newShape.creating = true;
break;
case Shape.Polygon:
newShape = new Polygon({ coor: [curPoint] }, this.dataset.length);
newShape = new Polygon({ coor: [curPoint], label: this.defaultLabel }, this.dataset.length);
newShape.creating = true;
break;
case Shape.Dot:
newShape = new Dot({ coor: curPoint }, this.dataset.length);
newShape = new Dot({ coor: curPoint, label: this.defaultLabel }, this.dataset.length);
this.emit('add', newShape);
break;
case Shape.Line:
newShape = new Line({ coor: [curPoint] }, this.dataset.length);
newShape = new Line({ coor: [curPoint], label: this.defaultLabel }, this.dataset.length);
newShape.creating = true;
break;
case Shape.Circle:
newShape = new Circle({ coor: curPoint }, this.dataset.length);
newShape = new Circle({ coor: curPoint, label: this.defaultLabel }, this.dataset.length);
newShape.creating = true;
break;
case Shape.Grid:
newShape = new Grid({ coor: [curPoint, curPoint] }, this.dataset.length);
newShape = new Grid({ coor: [curPoint, curPoint], label: this.defaultLabel }, this.dataset.length);
newShape.creating = true;
break;
default:
Expand Down Expand Up @@ -1135,12 +1137,14 @@ export default class CanvasSelect extends EventBus {
const isHideLabel = typeof hideLabel === 'boolean' ? hideLabel : this.hideLabel;
const isLabelUp = typeof labelUp === 'boolean' ? labelUp : this.labelUp;
const currLineWidth = lineWidth || this.lineWidth;
// 如果形状没有 label，使用默认 label
const displayLabel = label || this.defaultLabel;

if (this.ctx && label.length && !isHideLabel) {
if (this.ctx && displayLabel.length && !isHideLabel) {
this.ctx.font = labelFont || this.labelFont;
const textPaddingLeft = 4;
const textPaddingTop = 4;
const newText = label.length < this.labelMaxLen + 1 ? label : `${label.slice(0, this.labelMaxLen)}...`;
const newText = displayLabel.length < this.labelMaxLen + 1 ? displayLabel : `${displayLabel.slice(0, this.labelMaxLen)}...`;
const text = this.ctx.measureText(newText);
const font = parseInt(this.ctx.font) - 4;
const labelWidth = text.width + textPaddingLeft * 2;
Expand Down