我正在编写一个组件,允许用户在图像上创建可点击区域,这些是矩形,然后在查看器中表示为锚点。编辑器工作正常,元素正确定位,但当观察者加载时,锚元素不再正确定位。
查看器呈现以下html模板
imageMaps
[ { "id": "d65843cd-5668-4578-a367-e2793f356b7e", "top": 165, "left": 162, "width": 191, "height": 71 } ]
数组看起来像link
(注意:target
和{{1}}是可选的)
我认为问题在于图像在编辑器中对于观看者(更大)的尺寸不同(更小),在预览中再次变大,因此当图像改变尺寸时,覆盖图保持在相同的位置。
值得注意的是,在编辑器和查看器中,左侧有一个面板,预览中没有该面板,编辑器中有一些填充和边距元素。
我不太确定如何调整每个叠加元素相对于图像大小和比例的位置和大小,所以如果有人可以帮助它会非常感激吗?