FabricJS 如何确保注释粘在页面上的位置而不是视口（可能是纯 JS/CSS 问题）
Posted
技术标签:
【中文标题】FabricJS 如何确保注释粘在页面上的位置而不是视口（可能是纯 JS/CSS 问题）【英文标题】：FabricJS how to ensure annotation sticks to position on the page and NOT viewport (Might be a pure JS/CSS problem) 【发布时间】：2021-03-30 07:46:42 【问题描述】：我想知道是否可以让画布跨越整个页面而不仅仅是视口。这是我要实现的目标的图片说明：
所以这里我们在文本 page1 上有了一个绘图。此注释位于页面顶部。
当我向下滚动时，注释跟随我
但是，我希望注释即使在滚动时也能保持在其绘制的确切位置。
这种不需要的行为是因为我初始化画布的方式：
index.js
const initCanvas = (id) =>
return new fabric.Canvas(id,
width: window.innerWidth,
height: window.innerHeight,
zindex: 99,
overlayColor: 'rgba(0, 0, 0, 0.85)',
)
index.css
.canvas-container
position: fixed !important;
top:0px;
left:0px;
index.html：
<body>
<div id="root">
....
<canvas id="canvas">
</canvas>
</div>
</body>
这个问题也可以改写为，有没有办法初始化画布以覆盖整个屏幕而不仅仅是视口？
如果这不可能，我可以采取一种聪明的解决方法来实现我想要的行为吗？
编辑：
这是我快速设置的 JSfiddle enter link description here
【问题讨论】：
您可以在这里找到的任何 jsfiddles 和 stack-sn-ps 有帮助吗？ ***.com/questions/21931271/… 嘿 @jqueryhtmlCSS 感谢您向我强调这一点。但是，如果我错了，请纠正我，但解决方案似乎是根据视口调整结构的大小哦，我不确定我是否可以将画布调整到整个页面，甚至跨越视口中不可见的区域跨度> 只要点击一两下代码就可以在某处运行，您和其他人更容易从这个问题中受益并参与改进它。 好的！生病尝试设置一个jsfiddle，之前没有这样做过哈哈！ @jqueryHtmlCSS 嘿！我已经设置了一个 jsfiddle 来说明问题，感谢您的反馈！ 【参考方案1】：我意识到这是不久前的事了，但如果其他人正在寻找答案 - 我认为是 css。将其从“固定”更改为“绝对”，您应该一切顺利。 position: absolute !important;
【讨论】：
以上是关于FabricJS 如何确保注释粘在页面上的位置而不是视口（可能是纯 JS/CSS 问题）的主要内容，如果未能解决你的问题，请参考以下文章