@turbox3d/graphic-component-pixi
Version:
Graphic component library based on pixi
299 lines • 10.3 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import { Mesh2D } from '@turbox3d/renderer-pixi';
import * as PIXI from 'pixi.js';
import { drawText } from '../_utils/utils';
var DIM_OFFSET = 80;
var DIM_INTERNAL = 80;
var textH = 40;
var textOffsetK = 1; // 标注垂直于文字方向偏移系数,分母为文字尺寸
/**
* 根据两个端点生成尺寸线数据
*/
export function generateDimData(x0, y0, x1, y1) {
// for (let i = 0; i < 100; i++) {
var endLineL = 25;
var endLine2L = 35;
// compute line data
var v = {
x: x1 - x0,
y: y1 - y0
};
var vL = Math.sqrt(v.x * v.x + v.y * v.y);
v.x /= vL;
v.y /= vL;
// anticlockwise 90 vector
var v1 = {
x: -v.y,
y: v.x
};
// anticlockwise 45 vector
var v2 = {
x: 0.707 * v.x - 0.707 * v.y,
y: 0.707 * v.x + 0.707 * v.y
};
var data = [
// main body
{
x: x0,
y: y0
}, {
x: x1,
y: y1
},
// end line
{
x: x0 + endLineL * v1.x,
y: y0 + endLineL * v1.y
}, {
x: x0 - endLineL * v1.x,
y: y0 - endLineL * v1.y
}, {
x: x1 + endLineL * v1.x,
y: y1 + endLineL * v1.y
}, {
x: x1 - endLineL * v1.x,
y: y1 - endLineL * v1.y
}
// 45° end line
// { x: x0 + endLine2L * v2.x, y: y0 + endLine2L * v2.y },
// { x: x0 - endLine2L * v2.x, y: y0 - endLine2L * v2.y },
// { x: x1 + endLine2L * v2.x, y: y1 + endLine2L * v2.y },
// { x: x1 - endLine2L * v2.x, y: y1 - endLine2L * v2.y },
];
var length = vL;
var angle = Math.atan2(v.y, v.x);
return {
data: data,
length: length,
angle: angle
};
}
var Dimension = /*#__PURE__*/function (_Mesh2D) {
function Dimension() {
var _this;
_classCallCheck(this, Dimension);
_this = _callSuper(this, Dimension, arguments);
_this.view = new PIXI.Container();
_this._interactContainer = new PIXI.Container();
// public componentWillReceiveProps(para1,para2){
// console.warn(para1,para2)
// }
_this.graphic2endPsMap = new Map();
_this.onClick = function (v, e) {
var _a, _b;
var targetG = _this._interactContainer.children[0];
_this._interactContainer.children.forEach(function (c) {
if (_this._distance2(c.position, e.getScenePosition()) < _this._distance2(targetG.position, e.getScenePosition())) targetG = c;
});
(_b = (_a = _this.props).clickCallback) === null || _b === void 0 ? void 0 : _b.call(_a, _this.graphic2endPsMap.get(targetG));
};
return _this;
}
_inherits(Dimension, _Mesh2D);
return _createClass(Dimension, [{
key: "draw",
value: function draw() {
var _this2 = this;
var _a, _b, _c, _d, _e;
this.view.removeChildren();
var graphics = new PIXI.Graphics();
this.view.addChild(graphics);
this._interactContainer.removeChildren();
this.view.addChild(this._interactContainer);
// processedData 数据格式 { p0: { x: 1300, y: 2250 }, p1: { x: 2700, y: 2250 } },
var textInfo = [];
var processedData = this.processData();
graphics.lineStyle(1, 0x131313);
graphics.line["native"] = true;
for (var i = 0; i < processedData.length; i++) {
var _generateDimData = generateDimData(processedData[i].p0.x, processedData[i].p0.y, processedData[i].p1.x, processedData[i].p1.y),
data = _generateDimData.data,
angle = _generateDimData.angle,
length = _generateDimData.length;
var roundLength = Math.round(length);
if (roundLength === 0) {
// eslint-disable-next-line no-continue
continue;
}
for (var j = 0; j < data.length; j += 2) {
graphics.moveTo(data[j].x, data[j].y);
graphics.lineTo(data[j + 1].x, data[j + 1].y);
}
var center = {
x: (processedData[i].p0.x + processedData[i].p1.x) / 2,
y: (processedData[i].p0.y + processedData[i].p1.y) / 2
};
var textOffsetDir = {
x: -Math.sin(angle),
y: Math.cos(angle)
};
center.x += textOffsetK * textH * textOffsetDir.x;
center.y += textOffsetK * textH * textOffsetDir.y;
textInfo.push({
roundLength: roundLength,
params: {
offset: {
x: center.x,
y: center.y
},
size: textH,
rotation: angle
},
endPoints: {
p0: processedData[i].p0,
p1: processedData[i].p1
}
});
}
// delete text data
if (this.props.editableTextPs) {
this.props.editableTextPs.forEach(function (p) {
var nearestD2 = Infinity;
var nearestIndex = -1;
textInfo.forEach(function (info, i) {
var tempD2 = Math.pow(p.x - info.params.offset.x, 2) + Math.pow(p.y - info.params.offset.y, 2);
if (tempD2 < nearestD2) {
nearestD2 = tempD2;
nearestIndex = i;
}
});
textInfo.splice(nearestIndex, 1); // delete nearest text
});
}
// draw text
graphics.lineStyle(0);
textInfo.forEach(function (info) {
drawText(graphics, info.roundLength, info.params);
var interactGraphics = new PIXI.Graphics();
interactGraphics.lineStyle(0);
interactGraphics.beginFill(0x00ff00, 0.0001);
var halfH = info.params.size / 2;
var halfW = info.roundLength.toString().length * 0.8 * halfH;
interactGraphics.drawRect(-halfW, -halfH, 2 * halfW, 2 * halfH);
interactGraphics.position.set(info.params.offset.x, info.params.offset.y);
interactGraphics.endFill();
interactGraphics.rotation = info.params.rotation;
_this2._interactContainer.addChild(interactGraphics);
_this2.graphic2endPsMap.set(interactGraphics, info);
});
this.view.rotation = (_a = this.props.rotation) !== null && _a !== void 0 ? _a : 0;
this.view.scale.set((_c = (_b = this.props.scale) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 1, (_e = (_d = this.props.scale) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 1);
}
}, {
key: "onClickable",
value: function onClickable() {
return true;
}
}, {
key: "_distance2",
value: function _distance2(p0, p1) {
return Math.pow(p0.x - p1.x, 2) + Math.pow(p0.y - p1.y, 2);
}
/**
* @description: 矩形交错网格构件上获取标注端点坐标数组
*
* 3-------------A------------2
* | | |
* | | |
* | | |
* C-------------B------------D
* | |
* | |
* | |
* 0--------------------------1
*
* bbox是整个构件的包围盒四个点
* AB是内插的竖直构件，上方的标注需要体现其水平X位置，
* CD是内插的水平构件，右方标注需要体现其竖直Y位置
*/
}, {
key: "processData",
value: function processData() {
var lineData = [
// { p0: { x: 1300, y: 2250 }, p1: { x: 2700, y: 2250 } },
];
// 遍历窗
this.props.data.forEach(function (data) {
var oneBlockLineData = [];
var bbox = data.bbox,
innerHY = data.innerHY,
innerVX = data.innerVX;
// 计算最外围标注
// 有内插标注则则最外围标注有额外偏移
var interHK = innerVX.length ? 1 : 0;
var interVK = innerHY.length ? 1 : 0;
// 上方横
oneBlockLineData.push({
p0: {
x: bbox[3].x,
y: bbox[3].y + DIM_OFFSET + interHK * DIM_INTERNAL
},
p1: {
x: bbox[2].x,
y: bbox[3].y + DIM_OFFSET + interHK * DIM_INTERNAL
}
});
// 右侧竖
oneBlockLineData.push({
p0: {
x: bbox[1].x + DIM_OFFSET + interVK * DIM_INTERNAL,
y: bbox[2].y
},
p1: {
x: bbox[1].x + DIM_OFFSET + interVK * DIM_INTERNAL,
y: bbox[1].y
}
});
// 竖直构件x排序
if (innerVX.length) {
var PX = [bbox[3].x, bbox[2].x];
PX = PX.concat(innerVX);
PX.sort(function (a, b) {
return a - b;
});
for (var i = 0; i < PX.length - 1; i++) {
oneBlockLineData.push({
p0: {
x: PX[i],
y: bbox[2].y + DIM_OFFSET
},
p1: {
x: PX[i + 1],
y: bbox[2].y + DIM_OFFSET
}
});
}
}
// 水平构件y排序
if (innerHY.length) {
var PY = [bbox[2].y, bbox[1].y];
PY = PY.concat(innerHY);
PY.sort(function (a, b) {
return b - a;
});
for (var _i = 0; _i < PY.length - 1; _i++) {
oneBlockLineData.push({
p0: {
x: bbox[1].x + DIM_OFFSET,
y: PY[_i]
},
p1: {
x: bbox[1].x + DIM_OFFSET,
y: PY[_i + 1]
}
});
}
}
lineData = lineData.concat(oneBlockLineData);
});
return lineData;
}
}]);
}(Mesh2D);
export { Dimension as default };