[GitHub] [incubator-echarts] peach5460 opened a new issue #12851: dragging以后position错误

[GitBox]

peach5460 opened a new issue #12851:
URL: https://github.com/apache/incubator-echarts/issues/12851


   ### Version
   4.8.0
   
   ### Steps to reproduce
   首先，我在图面上初始化了一个多边形，并开启了draggable属性，使其支持拖动。 然后我拖动以后，需要知道最新的坐标。
   
   
我注册了一个click事件，用来查看坐标，但是我发现坐标值拖动以后毫无变化；那么我猜测，可能是用position实现的，可是获取到的属性里没有position属性。
 然后经过测试我发现，只有在初始化多边形的时候显式定义position属性，才能在获取属性的时候获取到position的值。
   
   `
   <div id="container" style="height: 100%;"></div>
   <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.js";></script>
   <script type="text/javascript">
     function hittest(params) {
       if (params.componentType == "graphic") {
         let shapeobj = null;
         let opt = myChart.getOption();
         for (const keyele in opt.graphic) {
           if (opt.graphic.hasOwnProperty(keyele)) {
             const elem = opt.graphic[keyele];
             for (const key in elem.elements) {
               if (elem.elements.hasOwnProperty(key)) {
                 if (params.name === elem.elements[key].id) {
                   shapeobj = elem.elements[key];
                   console.log(shapeobj, "shapeobj");
                   console.log(shapeobj.position, "position");
                 }
               }
             }
           }
         }
       }
     }
   
     var dom = document.getElementById("container");
     var myChart = echarts.init(dom);
     option = null;
     option = {
       xAxis: [
         {
           type: "value",
           min: 0,
           max: 100,
           show: true,
         },
       ],
       yAxis: [
         {
           type: "value",
           min: 0,
           max: 100,
           show: true,
         },
       ],
     };
     if (option && typeof option === "object") {
       myChart.setOption(option, true);
   
       var ppp = [
         [20, 50],
         [45, 90],
         [60, 80],
       ];
   
       graoption = null;
       graoption = {
         graphic: [
           {
             type: "polygon",
             id: "poly_area_1",
             name: "poly_area_1",
             draggable: true,
             shape: {
               points: echarts.util.map(ppp, function (item) {
                 return myChart.convertToPixel(
                   { xAxisIndex: 0, yAxisIndex: 0 },
                   item
                 );
               }),
             },
             style: {
               fill: "transparent",
               stroke: "black",
             },
             //position: [0, 0],
           },
         ],
       };
       if (graoption && typeof graoption === "object") {
         myChart.setOption(graoption);
       }
   
       myChart.on("click", hittest);
     }
   </script>
   `
   
   ### What is expected?
   我期望有如下结果： 1，不要我显式定义position，就能获取到position的值 
2，最好能提供一个接口，能直接获取point在经过仿射变换以后的真实坐标，要不然我还需要在外面通过各个属性去计算真实坐标。
   
   如果能实现第二个接口，那么position是否能获取到意义就不大了。
   
   ### What is actually happening?
   请查看被注释的 //position: [0, 0]这一行，被注释的时候click里面取不到position，根本无从得知真实的graphic坐标是多少。
   
   我最终的目的，是为了创建一个多边形。然后无论我怎么编辑，都可以随时获取多边形的顶点坐标，然后用来做后面的业务计算。
   
   <!-- This issue is generated by echarts-issue-helper. 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:
us...@infra.apache.org



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