You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/06/23 03:51:19 UTC
[GitHub] [incubator-echarts] peach5460 opened a new issue #12851: dragging以后position错误
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:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] peach5460 edited a comment on issue #12851: dragging以后position错误
Posted by GitBox <gi...@apache.org>.
peach5460 edited a comment on issue #12851:
URL: https://github.com/apache/incubator-echarts/issues/12851#issuecomment-647892763
进一步的问题，伪代码如下：
伪代码
```
function onShapeDragend(e) {
//...获取polygon
// 遍历polygon的点,将position叠加上去
for (let index = 0; index < points.length; index++) {
points[index][0] = points[index][0] + this.position[0];
points[index][1] = points[index][1] + this.position[1];
}
// 替换原来的polygon的点
myChart.setOption({
graphic: [
{
id: id,
shape: { points: points },
position: [0, 0],
},
],
});
}
```
如果我再dragend事件里，将这个polygon的坐标手动叠加position，然后将position强制设为【0，0】，拖动几次以后，整个echart的基本对象坐标体系就全乱了，polygon再也选不中了(绘制的位置和鼠标拾取的位置不在一个地方)。
----------------------------------------------------------------
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:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] echarts-bot[bot] commented on issue #12851: dragging以后position错误
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #12851:
URL: https://github.com/apache/incubator-echarts/issues/12851#issuecomment-647891205
Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that **you have posted enough image to demo your request**. You may also check out the [API](http://echarts.apache.org/api.html) and [chart option](http://echarts.apache.org/option.html) to get the answer.
If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.
If you are interested in the project, you may also subscribe our [mail list](https://echarts.apache.org/en/maillist.html).
Have a nice day! 🍵
----------------------------------------------------------------
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:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [incubator-echarts] peach5460 commented on issue #12851: dragging以后position错误
Posted by GitBox <gi...@apache.org>.
peach5460 commented on issue #12851:
URL: https://github.com/apache/incubator-echarts/issues/12851#issuecomment-647892763
进一步的问题，伪代码如下：
伪代码
```
function onShapeDragend(e) {
//...获取polygon
// 遍历polygon的点,将position叠加上去
for (let index = 0; index < points.length; index++) {
points[index][0] = points[index][0] + this.position[0];
points[index][1] = points[index][1] + this.position[1];
}
// 替换原来的polygon的点
myChart.setOption({
graphic: [
{
id: id,
shape: { points: points },
position: [0, 0],
},
],
});
}
```
如果我再dragend事件里，将这个polygon的坐标手动叠加position，然后将position强制设为【0，0】，拖动几次以后，整个echart的基本对象坐标体系就全乱了，polygon再也选不中了。
----------------------------------------------------------------
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:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org