@turbox3d/graphic-component-pixi
Version:
Graphic component library based on pixi
112 lines • 4.97 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
function drawLineByShape(graphics, curve, matrix) {
var c = curve.toJSON();
switch (curve.type) {
case 'QuadraticBezierCurve':
{
var v0 = new THREE.Vector2().fromArray(c.v0).applyMatrix3(matrix);
var v1 = new THREE.Vector2().fromArray(c.v1).applyMatrix3(matrix);
var v2 = new THREE.Vector2().fromArray(c.v2).applyMatrix3(matrix);
graphics.bezierCurveTo(v0.x, v0.y, v1.x, v1.y, v2.x, v2.y);
break;
}
case 'LineCurve':
{
var v = new THREE.Vector2().fromArray(c.v2).applyMatrix3(matrix);
graphics.lineTo(v.x, v.y);
break;
}
default:
break;
}
}
/**
* 绘制字体
* @param {PIXI} graphics graphics
* @param {string} string 文本
* @param {ITransform} transform 绘制的 model matrix decompose
*/
export function drawText(_x, _x2, _x3, _x4) {
return _drawText.apply(this, arguments);
}
// export function computeFlowLayoutPosition(central: boolean, margin?: string) {
// const [posX, posY] = central ? [0 - this.view.width / 2, 0 - this.view.height / 2] : [0, 0];
// const [top, right, bottom, left] = margin?.split(',').map(n => parseInt(n, 10)) || [0, 0, 0, 0];
// const parentNode = this._vNode.parent;
// if (parentNode && parentNode.instance instanceof Container2d) {
// this.view.position.x = posX + left;
// if (parentNode.child === this._vNode) {
// this.view.position.y = posY + top;
// }
// if (this._vNode.sibling) {
// const siblingMargin = this._vNode.sibling?.props.margin?.split(',').map(n => parseInt(n, 10)) || [0, 0, 0, 0];
// if (this._vNode.sibling?.instance instanceof Mesh2D) {
// ((this._vNode.sibling?.instance as any).view as PIXI.Container).position.y = this.view.position.y + this.view.height + bottom + siblingMargin[0];
// }
// }
// }
// }
function _drawText() {
_drawText = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(graphics, string, transform, options) {
var _a, _b, defaultOps, ops, size, font, str, textShapes, halfH, halfW, offset, rotation, matrix, cos, sin, i, shape, shapeCurveLength, curve, v, j, holes, _j, hole, v2, k;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
// generate shapes
defaultOps = {
color: 0x131313,
fontUrl: ''
};
ops = options || defaultOps;
size = (transform === null || transform === void 0 ? void 0 : transform.size) || 5;
_context.next = 5;
return new FontLoader().loadAsync(ops.fontUrl || defaultOps.fontUrl);
case 5:
font = _context.sent;
str = string.toString();
textShapes = font.generateShapes(str, size); // matrix parameter
halfH = size / 2;
halfW = str.length * 0.7 * halfH;
offset = {
x: ((_a = transform === null || transform === void 0 ? void 0 : transform.offset) === null || _a === void 0 ? void 0 : _a.x) || 0,
y: ((_b = transform === null || transform === void 0 ? void 0 : transform.offset) === null || _b === void 0 ? void 0 : _b.y) || 0
};
rotation = (transform === null || transform === void 0 ? void 0 : transform.rotation) || 0; // compose matrix
matrix = new THREE.Matrix3();
cos = Math.cos(rotation);
sin = Math.sin(rotation);
matrix.set(cos, -sin, -cos * halfW + sin * halfH + offset.x, sin, cos, -sin * halfW - cos * halfH + offset.y, 1, 1, 1);
// draw
for (i = 0; i < textShapes.length; i++) {
graphics.beginFill(ops.color || defaultOps.color);
shape = textShapes[i];
shapeCurveLength = shape.curves.length;
curve = shape.curves[shapeCurveLength - 1];
v = new THREE.Vector2().fromArray(curve.toJSON().v2).clone().applyMatrix3(matrix);
graphics.moveTo(v.x, v.y);
for (j = 0; j < shapeCurveLength; j++) {
drawLineByShape(graphics, shape.curves[j], matrix);
}
holes = shape.holes;
for (_j = 0; _j < holes.length; _j++) {
hole = holes[_j];
graphics.beginHole();
v2 = hole.currentPoint.applyMatrix3(matrix);
graphics.moveTo(v2.x, v2.y);
for (k = 0; k < hole.curves.length; k++) {
drawLineByShape(graphics, hole.curves[k], matrix);
}
graphics.endHole();
}
}
case 17:
case "end":
return _context.stop();
}
}, _callee);
}));
return _drawText.apply(this, arguments);
}