examples/test-label-bug3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
<script src="/js/spritejs.js"></script>
<script src="http://s9.qhres2.com/static/0847e42b9c814c4b.js"></script>
</head>
<body>
<div id="container" style="height:500px;background-color:#ccc"></div>
<script>
const {Scene, Label, Polyline, Path} = spritejs;
const container = document.querySelector('#container');
const shape = 'M24.5 300.5a150 150 0 1 0 300 0a150 150 0 1 0 -300 0z';
const scene = new Scene({
container,
displayRatio: window.devicePixelRatio,
// contextType: 'webgl'
});
const layer = scene.layer('hahaha');
const polyline = new Polyline();
polyline.attr({
points: [[-43.7, 555.5], [-43.7, 254.02463410395694],
[-43.7, 254.02463410395694], [-6.200000000000003, 260.016583204131],
[31.299999999999997, 263.36277911891165],
[68.8, 262.10306566377784], [106.3, 256.97536589604306],
[143.8, 250.983416795869],
[181.3, 247.63722088108835],
[218.8, 248.8969343362222],
[256.3, 254.02463410395694],
[293.8, 260.016583204131], [331.3, 263.36277911891165],
[368.8, 262.10306566377784], [406.3, 256.9753658960431],
[443.8, 250.983416795869], [443.8, 250.983416795869],
[443.8, 555.5]],
clipPath: shape,
fillColor: '#f00',
smooth: true,
strokeColor: '#0f0',
});
const label = new Label();
label.attr({
text: 'aaaa',
fontSize: 60,
pos: [200, 300],
});
const path = new Path();
path.attr({
d: shape,
strokeColor: '#000',
});
layer.append(polyline);
layer.append(label);
layer.append(path);
</script>
</body>
</html>