cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
106 lines (105 loc) • 2.81 kB
JavaScript
import "../../echarts/lib/echarts.mjs";
import { extendShape } from "../../echarts/lib/util/graphic.mjs";
var LiquidShape = extendShape({
type: "ec-liquid-fill",
shape: {
waveLength: 0,
radius: 0,
radiusY: 0,
cx: 0,
cy: 0,
waterLevel: 0,
amplitude: 0,
phase: 0,
inverse: false
},
buildPath: function(ctx, shape) {
if (shape.radiusY == null) {
shape.radiusY = shape.radius;
}
var curves = Math.max(
Math.ceil(2 * shape.radius / shape.waveLength * 4) * 2,
8
);
while (shape.phase < -Math.PI * 2) {
shape.phase += Math.PI * 2;
}
while (shape.phase > 0) {
shape.phase -= Math.PI * 2;
}
var phase = shape.phase / Math.PI / 2 * shape.waveLength;
var left = shape.cx - shape.radius + phase - shape.radius * 2;
ctx.moveTo(left, shape.waterLevel);
var waveRight = 0;
for (var c = 0; c < curves; ++c) {
var stage = c % 4;
var pos = getWaterPositions(
c * shape.waveLength / 4,
stage,
shape.waveLength,
shape.amplitude
);
ctx.bezierCurveTo(
pos[0][0] + left,
-pos[0][1] + shape.waterLevel,
pos[1][0] + left,
-pos[1][1] + shape.waterLevel,
pos[2][0] + left,
-pos[2][1] + shape.waterLevel
);
if (c === curves - 1) {
waveRight = pos[2][0];
}
}
if (shape.inverse) {
ctx.lineTo(waveRight + left, shape.cy - shape.radiusY);
ctx.lineTo(left, shape.cy - shape.radiusY);
ctx.lineTo(left, shape.waterLevel);
} else {
ctx.lineTo(waveRight + left, shape.cy + shape.radiusY);
ctx.lineTo(left, shape.cy + shape.radiusY);
ctx.lineTo(left, shape.waterLevel);
}
ctx.closePath();
}
});
function getWaterPositions(x, stage, waveLength, amplitude) {
if (stage === 0) {
return [
[x + 1 / 2 * waveLength / Math.PI / 2, amplitude / 2],
[x + 1 / 2 * waveLength / Math.PI, amplitude],
[x + waveLength / 4, amplitude]
];
} else if (stage === 1) {
return [
[
x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2),
amplitude
],
[
x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1),
amplitude / 2
],
[x + waveLength / 4, 0]
];
} else if (stage === 2) {
return [
[x + 1 / 2 * waveLength / Math.PI / 2, -amplitude / 2],
[x + 1 / 2 * waveLength / Math.PI, -amplitude],
[x + waveLength / 4, -amplitude]
];
} else {
return [
[
x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2),
-amplitude
],
[
x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1),
-amplitude / 2
],
[x + waveLength / 4, 0]
];
}
}
export { LiquidShape as default };