tmtron opened a new issue #10222: Fix clipPointsByRect()
URL: https://github.com/apache/incubator-echarts/issues/10222
 
 
   ### Version
   4.2.1
   
   ### Reproduction link
   [jsFiddle Example](https://jsfiddle.net/tmtron/k9aof5pd/25/)
   
   When you do not zoom, you see the full polygon (the yellow area marks the 
region that we will zoom into):
   
![image](https://user-images.githubusercontent.com/20422904/55612275-24700280-5788-11e9-8b4f-1125e7d590ef.png)
   
   
   ### Steps to reproduce
   use a custom series to draw a polygon. when you zoom in, the polygon will be 
distored (it is not clipped correctly)
   
   In the [jsFiddle Example](https://jsfiddle.net/tmtron/k9aof5pd/25/) you can 
press the `zoom Part` button below the chart. Here is the result, when 
`echarts.graphic.clipPointsByRect` is used:
   
![image](https://user-images.githubusercontent.com/20422904/55612316-3d78b380-5788-11e9-9e73-7f9d1b1a81b9.png)
   notice the position of the zoom slider. The first data-point in the zoomed 
view seems to be at x=40 (but is in fact on x=25!)
   
   ### What is expected?
   Clipping a polygon to a rectangle may need to change the ploygon shape 
(maybe add points).  
   The zoomed polygon should look like the yellow highlighted area in the first 
image.
   
   ### What is actually happening?
   the current implementation only changes the x/y coordinates of the existing 
polygon, but does not change the shape
   
   ---
   Full details are also on Stackoverflow: [How to avoid polygon distortion 
when 
zooming?](https://stackoverflow.com/questions/55521280/how-to-avoid-polygon-distortion-when-zooming/)
   
   **Proposed solution**:
   `clipPointsByRect()` should use a smarter clipping algorithm e.g. 
[Sutherland-Hodgman 
algorithm](https://en.wikipedia.org/wiki/Sutherland%E2%80%93Hodgman_algorithm) 
for polygon clipping
   Here is an updated [js-fiddle 
example](https://jsfiddle.net/tmtron/k9aof5pd/34/), that uses the external 
[lineclip](https://github.com/mapbox/lineclip) library instead of 
`clipPointsByRect()`. This shows the correct result:
   
![image](https://user-images.githubusercontent.com/20422904/55612495-a9f3b280-5788-11e9-9ccf-bef2eaefb64a.png)
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
[email protected]


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to