matplotlib以像素为单位渲染具有specs（大小，alligment等）的图像

Question

我有一个模型的规格，例如，Photoshop / Illustrator / Sketch文件，每个元素的规格，如大小，位置和坐标，以像素为单位。

图片如下：

我可以使用标准的 matplotlib 技术绘制类似的图片，没有任何问题。

问题是，如何使用其规格渲染图像完全？所有尺寸，字体大小，对齐方式应与规格中的相同（因为它在Illustrator中绘制）。

我已经研究过matplotlib文档，但即使是transformers教程也没有帮助。

更新以及一个确切的示例。

我在Zeplin有一个模拟，显示每个情节的协调（图像也是这里的情节）。所以我知道，图像的边距为25x25像素，尺寸为80x80像素。

this is mock image（再次不允许嵌入图片）。

你会怎么做？

我用于绘图的代码

fig, ax = plt.subplots(1, 2, figsize=(20, 10), sharey=True)

recs = ax[0].barh(y_pos, widths, align='edge');

img = mpimg.imread('/Users/iwitaly/Downloads/2017-11-12 17.40.46.jpg')

ax[0].spines['left'].set_visible(False);
ax[0].spines['right'].set_visible(False);
ax[0].spines['bottom'].set_visible(False);
ax[0].spines['top'].set_visible(False);

ax[0].get_xaxis().set_visible(True);
ax[0].get_yaxis().set_visible(True);


obj = ax[0].text(x=0, y=3.9, s=r'Name: Vitaly Davydov',
          fontsize=30, fontname="Courier New", weight='bold');

ax[0].axhline(y=3.85, xmin=0, xmax=0.75, color='black');

# I'd like to place axicon exactly with 25x25 marging from top left corner
axicon = fig.add_axes([0.08, 1, 0.2, 0.2], transform=None)
axicon.axis('off');
axicon.imshow(img, interpolation='none');


for i, r in enumerate(recs):
    r.set_color(index_to_color[i]);
    r.set_height(col_wight);
    ax[0].text(x=0, y=text_positions[i], s=index_to_text[i], fontsize=30, fontname="Courier New");


ax[1].spines['left'].set_visible(False);    
ax[1].spines['right'].set_visible(False);
ax[1].spines['bottom'].set_visible(False);
ax[1].spines['top'].set_visible(False);

ax[1].get_xaxis().set_visible(False);
ax[1].get_yaxis().set_visible(False);


ax[1].text(x=0, y=3.9, s='Increment:', fontsize=30,
           fontname="Courier New", weight='bold');

ax[1].axhline(y=3.85, xmin=0, xmax=0.4, color='black');

for i, r in enumerate(recs):
    text_x, text_y = r.xy

    increment_pos_y = text_y + col_wight / 2
    if increment_values[i] > 0:        
        increment_text = '+{}'.format(increment_values[i])
    elif increment_values[i] < 0:
        increment_text = '-{}'.format(increment_values[i])
    else:
        increment_text = '{}'.format(increment_values[i])


    ax[1].text(x=0, y=increment_pos_y, s=increment_text,
               fontsize=30, color=index_to_color[i],
               fontname="Courier New", weight='bold');  

在这个例子中，我想放置 axicon 轴，这是一个25x25边距和80x80尺寸（全像素）的图像。

Answer 1

要将轴放置到图中，您可以使用fig.add_axes([left, bottom, width, height])，其中left, bottom, width, height是图形大小的一部分。

要从像素转换为图形大小的分数，您需要将像素除以图dpi和图形大小。例如。对于左边缘

left = 25/fig.dpi/fig.get_size_inches()[0]

完整示例：

import matplotlib.pyplot as plt
import numpy as np

fig, ax = plt.subplots(1, 2, figsize=(10, 7))
y_pos, widths = np.linspace(0,3,4), np.random.rand(4)
recs = ax[0].barh(y_pos, widths, align='edge');

#img = plt.imread('/Users/iwitaly/Downloads/2017-11-12 17.40.46.jpg')
img = np.random.rand(80,80)

# I'd like to place axicon exactly with 25x25 marging from top left corner
x,y= 25,25 #pixels
dx,dy = 80,80
w,h = fig.get_size_inches()
axicon = fig.add_axes([x/float(fig.dpi)/w, 1.-(y+dy)/float(fig.dpi)/h, 
                       dx/float(fig.dpi)/w, dy/float(fig.dpi)/h])
axicon.axis('off');
axicon.imshow(img, interpolation='none');

plt.show()