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: commits-unsubscr...@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org

Reply via email to