html5-canvas 相关问题

我有以下无法正常工作的内容： var canvas = new Fabric.Canvas('canvas'); canvas.observe('鼠标:down', function(e) { mousedown(e); }); canvas.observe('鼠标：移动', function(e) {

javascript draw html5-canvas fabricjs

回答 6 投票 0

在视频顶部添加 FabricJS Canva

我想在视频顶部添加 FabricJS 画布，但无法将画布位置属性设置为“绝对”。 <p>我想在视频顶部添加 FabricJS 画布，但无法将画布位置属性设置为“绝对”。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script> <div id="videoKit"> <video id="video" controls preload="metadata"> <source src="https://media.istockphoto.com/id/1760658147/fr/vid%C3%A9o/prise-de-vue-par-drone-de-dauphins-nageant.mp4?s=mp4-640x640-is&k=20&c=y9709pLK1KmLp1FZRzkKd8Pmx4xurbRqAK6RWKLSapc=" type="video/mp4"/> </video> <canvas id="canvas"></canvas> </div> <script> var canvas = new fabric.Canvas('canvas', { width: 500, height: 500 }); var canvasNode = canvas.getElement(); canvasNode.style.position = 'absolute'; canvasNode.style.left = '0px'; canvasNode.style.top = '0px'; canvasNode.style.border = '2px solid #000'; </script></code></pre> </div> </div> <p></p> <p>我尝试更改初始画布、上部画布和下部画布以及 FabricJS 设置的画布容器的 CSS 属性。但我的画布仍在视频下方。</p> <p>我们可以正确地将 FabricJS 画布放在视频之上吗？</p> </question> <answer tick="false" vote="0"> <p>经过多次尝试，终于发现这个问题的原因是在css中</p> <p>如果您想按照自己的意愿定位canvas标签，则必须将父标签的position属性设置为“relative”，将video标签的position属性设置为“absolute”。</p> <p>这是我根据您的代码修改的代码。（已更改 2 行。）</p> <pre><code><div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script> <div id="videoKit" style="position: relative"> <video id="video" controls preload="metadata" style="position: absolute"> <source src="https://media.istockphoto.com/id/1760658147/fr/vid%C3%A9o/prise-de-vue-par-drone-de-dauphins-nageant.mp4?s=mp4-640x640-is&k=20&c=y9709pLK1KmLp1FZRzkKd8Pmx4xurbRqAK6RWKLSapc=" type="video/mp4" /> </video> <canvas id="canvas"></canvas> </div> <script> var canvas = new fabric.Canvas('canvas', { width: 500, height: 500, }); var canvasNode = canvas.getElement(); canvasNode.style.position = 'absolute'; canvasNode.style.left = '0px'; canvasNode.style.top = '0px'; canvasNode.style.border = '2px solid #000'; </script> </code></pre> <p>在我的电脑环境下测试后，确认运行正常。</p> <p>我希望这对您有帮助。谢谢:)</p> </answer> </body></html>

javascript html5-canvas fabricjs

回答 0 投票 0

将 SVG 转换为画布 PNG 删除 ios 上的transform3d

我正在尝试将 svg 加载到画布上，它在 chrome 和 firefox 上运行良好，但在 webkit 上却很混乱。我尝试更改 3d 变换的位置但无济于事。大家有什么经验或者建议吗...

svg safari html5-canvas css-transforms

回答 1 投票 0

在react中使用父组件的ref

我正在创建一个自上而下的游戏来学习反应。目前所有绘图都在 Canvas 组件中。我的目标是将每个游戏元素的绘图分成它自己的组件，但我不能......

javascript reactjs html5-canvas

回答 1 投票 0

大量 JavaScript 期间加载指示器

我正在为手机网络应用程序进行一些客户端图像缩放，然后将其发送出去。即使对于较新的 iPhone，有时也需要一段时间才能将 8MP 大照片缩小图像。难道是……