Draw text proposal
bpioge opened this issue · comments
bpioge commented
/**
- Draw the text tag on the top left of the shape
*/
public drawText() {
this.clearText();
const content = this.data['text'] || null;
if (!content) {
return;
}
let highestVertice = this.topLeftVertice(this.data.geometry.vertices);
let textPositionX = highestVertice[0] * this.scaleX;
let textPositionY = highestVertice[1] * this.scaleY;
const textSize = 10;
const style = new PIXITextStyle({
fontFamily: 'Arial',
fontSize: textSize,
fill: 0x444444
});
let textMetrics = PIXITextMetrics.measureText(content, style)
const boxWidth = Math.round(textMetrics.width + 5);
const boxHeight = Math.round(textMetrics.height + 3);
this.textGraphic.beginFill(0xFFFFFF, 0.80);
this.textGraphic.lineStyle(1, this.hex, 1, 0.5, true);
this.textGraphic.drawRect(
0, 0,
boxWidth,
boxHeight
);
const parent = this.getHigherParent();
if (parent) {
this.textGraphic.scale.x = 1.5 / parent.scale.x;
this.textGraphic.scale.y = 1.5 / parent.scale.y;
}
let textNode = new PIXIText(content, style);
textNode.roundPixels = true;
textNode.resolution = 3;
textNode.anchor.x = 0.5;
textNode.anchor.y = 0.6;
textNode.x = Math.round(boxWidth / 2);
textNode.y = Math.round(boxHeight / 2);
this.textGraphic.addChild(textNode);
this.textGraphic.pivot.set(boxWidth, boxHeight);
this.textGraphic.x = textPositionX;
this.textGraphic.y = textPositionY;
this.textGraphic.endFill();
}