GordoRank opened a new issue, #21231:
URL: https://github.com/apache/echarts/issues/21231
### Version
6.0.0
### Link to Minimal Reproduction
N/A
### Steps to Reproduce
- Create a chart with a slider dataZoom.
- Specify a backgroundColor for the dataZoom
- Specify a borderRadius for the dataZoom
### Current Behavior
The background extends beyond the defined border radius.
### Expected Behavior
The background should not extend beyond the defined borderRadius.
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
Fixing this issue is trivial.
The current code:
` SliderZoomView.prototype._renderBackground = function () {
var dataZoomModel = this.dataZoomModel;
var size = this._size;
var barGroup = this._displayables.sliderGroup;
var brushSelect = dataZoomModel.get('brushSelect');
barGroup.add(new Rect$2({
silent: true,
shape: {
x: 0,
y: 0,
width: size[0],
height: size[1]
},
style: {
fill: dataZoomModel.get('backgroundColor')
},
z2: -40
}));`
Results in this:
<img width="3480" height="1541" alt="Image"
src="https://github.com/user-attachments/assets/646d3251-ff76-416a-a07c-f70d77d9af87";
/>
Changing it to:
`SliderZoomView.prototype._renderBackground = function () {
var dataZoomModel = this.dataZoomModel;
var size = this._size;
var barGroup = this._displayables.sliderGroup;
var brushSelect = dataZoomModel.get('brushSelect');
var borderRadius = dataZoomModel.get('borderRadius');
barGroup.add(new Rect$2({
silent: true,
shape: {
x: 0,
y: 0,
width: size[0],
height: size[1],
r: borderRadius
},
style: {
fill: dataZoomModel.get('backgroundColor')
},
z2: -40
}));`
Results in a properly clipped rectange:
<img width="3385" height="1235" alt="Image"
src="https://github.com/user-attachments/assets/51f41e6b-4b5e-4073-88fb-e60141983899";
/>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
