AnyChart 用鼠标移动和调整图像 in/out 图表

Question

我正在寻找一种方法来放置多个图像 in/above 图表，然后用户可以使用鼠标移动和缩放图表。目前我正在使用：

var image = anychart.graphics.image(imageurl, x, y, width, height);
image.parent(chartcontainer);

绘制图表后，在图表上绘制图像。但是，我不知道如何调整大小和移动。

或者我应该使用 graphics.image 以外的东西来达到这个目的吗？

我之前也尝试过注释标签。

var controller = chart.annotations();

var annotation = controller.label();
    annotation.valueAnchor(706);
    annotation.xAnchor(50);
    annotation.anchor('top-left');
    annotation.text("");
    annotation.width(200);
    annotation.height(200);

    annotation.background({
    "enabled": true,
    "fill": {
            src: imageurl,
            mode: "stretch"
            }   
    });

这些行为完全符合预期，鼠标拖动和缩放标记。但顾名思义，它们只能用作图表中的注释，因此只能放置在我的图表系列（valueAnchor、xAnchor）的某些值处。但我也希望能够将图像放在图表之外，例如 header 区域，只需指定 X 和 Y 坐标，例如 graphics.image。还是有可能我遗漏了什么？

如果有人能帮助我，我会很高兴。

Answer 1

图形库不提供用于调整图像大小的现成解决方案。您应该实现调用库 API 以更改图像 width/height 或 apply scaling 的鼠标侦听器。但是它支持拖动功能，check the sample。可能，任何专门处理图像的第三方库都更适合您。

Answer 2

我现在已经实现了我的目标，方法是挂在图形图像的鼠标悬停事件上，然后将 div 放置在图像上，我将其设置为可调整大小和可拖动。在调整和拖动 div 时，我设置了图像的 x 和 y 坐标，以及宽度和高度。它运行良好并提供了预期的结果。

AnyChart 用鼠标移动和调整图像 in/out 图表

AnyChart move and resize images in/out the chart with the mouse

graphics

resize

image

move

anychart