问将图片添加到实际情节的背景中
EN

Stack Overflow用户

提问于 2022-06-25 10:03:07

回答 1查看 252关注 0票数 1

我试图在图像的顶部绘制一组盒子，以表达每一个盒子的特征(准确地说，是色彩)。

我的想法是得到这样的东西：

并且，在悬停时，得到这个特定盒子的颜色值。现在，这些框和包含在其中的图像部分的颜色已经计算出来，并存储在一个DataFrame中，如下所示：

"colourfulness_test (1).jpeg": [
    {
        "img_rect": [
            0.0,
            0.0,
            256.0,
            192.0
        ],
        "M": 40.86526507358546
    },
    {
        "img_rect": [
            256.0,
            0.0,
            512.0,
            192.0
        ],
        "M": 43.13601554186694
    },
    ... ]
}

列的名称是文件的名称，M是正方形(x0, y0, x1, y1)指定的颜色。我试图在文档后面的背景上添加图像，但是在大小方面有一种奇怪的行为。这是我正在使用的代码片段。

import plotly.graph_objects as go
from PIL import Image
fig = go.Figure()

# Add trace
# Instead of the whole dictionary of boxes, I'm using this tailored
# arrays with just two boxes to do small tests.
fig.add_trace(
    go.Scatter(
        x=[0, 200, 200, 0, 0, None, 500, 700, 700, 500, 500], 
        y=[0, 0, 200, 200, 0, None, 500, 500, 700, 700, 500], 
        customdata=[10,10,10,10,10,20,20,20,20,20,20],
        hovertemplate="%{customdata}")
)

fig.add_layout_image(
    dict(
        source=Image.open("./colourfulness_test (1).jpeg"),
        xref="x",
        yref="y",
        x=0,
        y=1536, 
        sizex=2048,
        sizey=1536,
        sizing="fill",
        opacity=0.5,
        layer="below"
    )
)

背景中的图像为2048x1536(宽度x高度)。宽度是正确设置的，但不知何故，高度不是，图像被切割。我必须在sizey和y中指定一些随机的大高度才能得到正确的位置。

如果我适当地设置高度和宽度，这就是它的样子。这幅画的宽度是对的，但高度不是。

如果我将y设置为4000，将sizey设置为4000 (图像呈现完美，尊重比例，等等)，我就会得到这样的图像。

plot

plotly

plotly-python

python

在线客服搭建方案

搭建集AI机器人、在线客服、智能外呼等多功能服务的客服系统，支持快速接入及自搭建客服系统，从而让顾客快速得到解答

回答 1

Stack Overflow用户

发布于 2022-06-25 12:14:06

看起来，图像的sizex和sizey是相对于散点图的x和y坐标绘制的，而且由于散点图本身在x和y轴上没有相等的尺度(请注意，在默认情况下，yaxis相对于X轴是相当压缩的)，这也会导致背景图像被压缩。

您可以尝试解决此问题的一件事是硬编码绘图的宽度和高度，使其成为相同数量的像素，并设置x和y轴的范围以匹配图像的尺寸。

例如：

im = Image.open("./colourfulness_test (1).jpeg")
w, h = im.size

fig.update_layout(
    width=800, height=800,
    xaxis_range=[0, w],
    yaxis_range=[0, h],
)