119 lines
4.4 KiB
TypeScript
119 lines
4.4 KiB
TypeScript
import React from 'react'
|
|
import { Circle, Layer, Line, Rect } from 'react-konva';
|
|
import ColorPolygon from './ColorPolygon';
|
|
import { ViewCenter, WaterTop } from './consts';
|
|
import { ControlPts, interpolate, intersection } from './coordinates';
|
|
import ZmDec from './ZmDec';
|
|
import { useLinearAnim } from './useLinearAnim';
|
|
|
|
const ZmColumn: React.FC<{
|
|
kdMax: number;
|
|
gtophgt?: number;
|
|
idx: number;
|
|
pts: ControlPts;
|
|
waterRatio: number;
|
|
selected: boolean;
|
|
}> = ({ kdMax, gtophgt, idx, pts, waterRatio, selected }) => {
|
|
|
|
const renKd = gtophgt; //useLinearAnim(gtophgt);
|
|
|
|
const a = pts.ZmArea[idx];
|
|
if (!a || typeof renKd !== 'number') {
|
|
return null;
|
|
}
|
|
|
|
const hh1 = (a.lb1.y - a.lt1.y) * 0.5;
|
|
const hh2 = (a.lb2.y - a.lt2.y) * 0.5;
|
|
|
|
const ratio = renKd / kdMax;
|
|
const e1 = hh1 * ratio * 0.8;
|
|
const e2 = hh2 * ratio * 0.8;
|
|
|
|
const lineLineLeft = { x: (a.lt1.x + a.lt2.x) * 0.5, y: (a.lt1.y + a.lt2.y) * 0.5 };
|
|
const lineLineRight = { x: (a.rt1.x + a.rt2.x) * 0.5, y: (a.rt1.y + a.rt2.y) * 0.5 };
|
|
const line1 = interpolate(lineLineLeft, lineLineRight, 0.25);
|
|
const line2 = interpolate(lineLineLeft, lineLineRight, 0.75);
|
|
|
|
const ty1 = a.lt1.y + hh1 - e1;
|
|
const ty2 = a.lt2.y + hh2 - e2;
|
|
const joiny = (ty1 + ty2) * 0.5;
|
|
|
|
const waterP1 = interpolate(a.lb0, { x: a.lb0.x, y: WaterTop }, waterRatio);
|
|
const waterP1R = { x: a.rb0.x, y: waterP1.y };
|
|
const waterP2 = intersection(ViewCenter, waterP1, { x: a.lb1.x, y: undefined });
|
|
const waterP2R = { x: a.rb1.x, y: waterP2.y };
|
|
const waterP3 = intersection(ViewCenter, waterP1, { x: a.lb3.x, y: undefined });
|
|
waterP3.y -= 26;
|
|
const waterP3R = { x: a.rb3.x, y: waterP3.y };
|
|
if (waterP3.x < waterP2.x) {
|
|
waterP3.x = waterP2.x;
|
|
}
|
|
if (waterP3R.x > waterP2R.x) {
|
|
waterP3R.x = waterP2R.x
|
|
}
|
|
|
|
//
|
|
const b1 = { x: a.lb0.x, y: a.lb0.y - 32 };
|
|
const b6 = { x: a.rb0.x, y: a.rb0.y - 32 };
|
|
const b2 = interpolate(b1, b6, 0.4);
|
|
const b5 = interpolate(b1, b6, 0.6);
|
|
const b3 = { x: b2.x, y: b2.y + 12 };
|
|
const b4 = { x: b5.x, y: b5.y + 12 };
|
|
|
|
const b1_1 = intersection(b1, ViewCenter, { x: a.lb1.x, y: undefined });
|
|
const b1_6 = intersection(b6, ViewCenter, { x: a.rb1.x, y: undefined });
|
|
const b1_2 = intersection(b2, ViewCenter, { x: undefined, y: b1_1.y });
|
|
const b1_5 = intersection(b5, ViewCenter, { x: undefined, y: b1_6.y });
|
|
const b1_3 = intersection(b3, ViewCenter, { x: b1_2.x, y: undefined });
|
|
const b1_4 = intersection(b4, ViewCenter, { x: b1_5.x, y: undefined });
|
|
|
|
return (
|
|
<>
|
|
{
|
|
waterP3 && waterP3R ? (
|
|
<ColorPolygon fill='#539cb9' pts={[waterP2, waterP2R, waterP3R, waterP3]} opacity={0.8} />
|
|
) : null
|
|
}
|
|
<ColorPolygon
|
|
desc="闸门上测"
|
|
fill='#afb5b5'
|
|
pts={[
|
|
[a.lt1.x, ty1],
|
|
[a.rt1.x, ty1],
|
|
[a.rt2.x, ty2],
|
|
[a.lt2.x, ty2],
|
|
]}
|
|
/>
|
|
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line1.x, line1.y, line1.x, joiny]} />
|
|
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x, line2.y, line2.x, joiny]} />
|
|
<Circle fill='#afb5b5' x={line1.x} y={joiny} radius={10} />
|
|
<Circle fill='#afb5b5' x={line2.x} y={joiny} radius={10} />
|
|
<Line stroke='#222' strokeWidth={12} points={[line1.x, joiny - 8, line1.x, joiny - 10]} />
|
|
<Line stroke='#222' strokeWidth={12} points={[line2.x, joiny - 8, line2.x, joiny - 10]} />
|
|
|
|
<Rect
|
|
desc='闸门正面'
|
|
fill={selected ? '#95927a' : '#5f6969'}
|
|
stroke={selected ? 'orange' : "#222"}
|
|
strokeWidth={1} x={a.lt1.x} y={ty1} width={a.rt1.x - a.lt1.x} height={hh1} />
|
|
|
|
<ZmDec tl={{ x: a.lt1.x, y: ty1 }} rb={{ x: a.rt1.x, y: ty1 + hh1 }} />
|
|
|
|
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_1, b1_2, b2, b1]} />
|
|
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_5, b1_6, b6, b5]} />
|
|
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_2, b1_3, b3, b2]} />
|
|
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_3, b1_4, b4, b3]} />
|
|
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_4, b1_5, b5, b4]} />
|
|
<ColorPolygon desc="出水口" fill='#728381' pts={[b1, b2, b3, b4, b5, b6, a.rb0, a.lb0]} />
|
|
|
|
{
|
|
waterP1.y < b1.y ? (
|
|
<ColorPolygon fill='#539cb9' pts={[waterP1, waterP1R, waterP2R, waterP2]} opacity={0.8} />
|
|
) : null
|
|
}
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default React.memo(ZmColumn) |