html5-canvas 相关问题

在我当前的项目中，我使用 Excalidraw，并在之上绘制的顶层。一切都很好，但是，当涉及到滚动无限画布时...... 在我当前的项目中，我使用 Excalidraw，并在 <div> 之上绘制 <canvas> 的顶层。这一切都工作正常，但是，当涉及到滚动无限画布时，如果鼠标位于其中一个 <div> 的顶部，滚动事件将不会传递到下面的画布，因此这些 <div>让用户体验变得相当笨拙。有没有办法让这些 <div> 对滚动事件不做出反应？我在 CSS 中尝试过类似 pointer-events: none 的方法，它可以工作，但是 <div> 根本不会对任何东西做出反应。这是一个带有示例的 CodeSandbox，可以通过以下代码块进行总结： "use client"; import { useMemo } from "react"; import dynamic from "next/dynamic"; const Excalidraw = dynamic( async () => { const mod = await import("@excalidraw/excalidraw"); return mod.Excalidraw; }, { ssr: false }, ) export default function Home() { const Excal = useMemo(() => <Excalidraw gridModeEnabled />, []) return ( <main className="absolute w-screen h-screen"> <div style={{ position: "fixed", zIndex: 100, top: "100px", left: "100px", backgroundColor: "yellow", cursor: "pointer", }} > <p>here</p> </div> {Excal} </main> ) } 嗯，我不知道如何编辑沙箱中的代码，但我已经在 Chrome DevTools 中成功编辑了它，因此您可以在源代码中应用相同的解决方案。基本上你必须拦截滚轮事件并手动将其分派到画布。我已为黄色框分配了一个 ID (my123)，以便能够在我的 javascript 代码中引用它。我还创建了一个变量来从我们的事件处理程序指向画布： myCanvas = $('.excalidraw__canvas.interactive') 然后 $('#my123').onmousewheel = function(e) { e.preventDefault(); myCanvas.dispatchEvent(new WheelEvent('wheel', { bubbles: e.bubbles, cancelable: e.cancelable, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey, deltaX: e.deltaX, deltaY: e.deltaY, deltaMode: e.deltaMode })); } 传递 ctrlKey 和 shiftKey 属性也允许缩放和水平滚动。请务必在创建画布后附加事件处理程序。

html css reactjs next.js html5-canvas

回答 1 投票 0

如何将 YouTube iframe 中的视频渲染到画布中？

各位！如何渲染来自 You_Tube 的视频标记到画布上？

youtube-api html5-canvas

回答 2 投票 0

如何使用 javascript 在 HTML canvas 元素上嵌入 YouTube 网址

我正在努力如何使用 JavaScript 在 html canvas 元素上播放嵌入的 YouTube 网址。我尝试过的示例代码 videoAsset = document.createElement("视频"); youtube = document.createEl...

javascript video canvas youtube html5-canvas

回答 2 投票 0

倾斜运动如何影响俯仰和偏航？

我正在尝试模拟飞机的转弯，特别是银行。因此，我想要一个俯仰运动来根据滚转水平改变飞机的实际俯仰和偏航。例如，如果...

math 3d html5-canvas

回答 1 投票 0

存储和检索 Fabric.js 项目

详细信息：我们将 Fabric.js 与 React 集成，以允许在画布上绘图。然而，我们现在面临着将画布数据保存在数据库中并在保留自定义属性的同时检索它的挑战......

javascript html5-canvas fabricjs

回答 1 投票 0

为什么无法下载最终版 - image3.png？

这是用户选择一张图像的代码。该图像成功地与第二张图像叠加，结果为 image3.png。但image3无法通过按钮下载。我也做不到

javascript html download html5-canvas

回答 1 投票 0

将 Three.js 动画放入 div 中

这是三个.js动画代码示例： var 角速度 = 0.2; var 最后时间 = 0; 函数动画（）{ var time = (new Date()).getTime(); var timeDiff =...</desc> <question vote="26"> <p>这是三个.js动画代码示例：</p> <pre><code><script defer="defer"> var angularSpeed = 0.2; var lastTime = 0; function animate(){ var time = (new Date()).getTime(); var timeDiff = time - lastTime; var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000; plane.rotation.z += angleChange; lastTime = time; renderer.render(scene, camera); requestAnimationFrame(function(){ animate(); }); } var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.y = -450; camera.position.z = 400; camera.rotation.x = 45 * (Math.PI / 180); var scene = new THREE.Scene(); var plane = new THREE.Mesh(new THREE.PlaneGeometry(300, 300), new THREE.MeshNormalMaterial()); plane.overdraw = true; scene.add(plane); animate(); </script> </code></pre> <p>我想通过 div id 将此动画代码绑定到某个特定的 div。因此，动画将显示在 div 内部。这将使我能够轻松地使用 CSS 操纵动画位置。我想到的是这样的事情：</p> <p>html:</p> <pre><code><canvas id="myCanvas" width="578" height="200"></canvas> </code></pre> <p>javascript: </p> <pre><code>var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do stuff here </code></pre> <p>但是我还没有找到一种方法可以用 Three.js 来做这样的事情。正如您在代码示例中看到的，没有我可以引用的画布元素。有什么想法吗？</p> </question> <answer tick="true" vote="43"> <p>您可以使用如下所示的模式：</p> <pre><code><div id="canvas"></div> </code></pre> <pre><code>#canvas { background-color: #000; width: 200px; height: 200px; border: 1px solid black; margin: 100px; padding: 0px; position: static; /* fixed or static */ top: 100px; left: 100px; } </code></pre> <pre><code>const container = document.getElementById( 'canvas' ); document.body.appendChild( container ); const renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( 200, 200 ); container.appendChild( renderer.domElement ); </code></pre> <p>小提琴：<a href="https://jsfiddle.net/uf4c0ws9/" rel="nofollow noreferrer">https://jsfiddle.net/uf4c0ws9/</a></p> <p>另请参阅 <a href="https://stackoverflow.com/questions/13542175/three-js-ray-intersect-fails-by-adding-div/13544277#13544277">THREE.js 添加 div 导致射线相交失败</a></p> <p>三.js r.150</p> </answer> <answer tick="false" vote="2"> <p><strong>如果您不想硬编码渲染器大小，那么下面的代码可以帮助您。</strong></p> <p>我动态计算画布的高度和宽度，然后相应地设置渲染器的大小和相机的位置。</p> <p>CSS</p> <pre><code> #canvas { background-color: #FFF; width: 200px; height:200px; border: 1px solid black; } </code></pre> <p>HTML</p> <pre><code><div id="canvas"/> </code></pre> <p>JavaScript</p> <pre><code> //Add Renderer renderer = new THREE.CanvasRenderer(); var container = document.getElementById('canvas'); var w = container.offsetWidth; var h = container.offsetHeight; renderer.setSize(w, h); container.appendChild(renderer.domElement); //Add Camera camera = new THREE.PerspectiveCamera( 75, w / h, 2, 1000 ); camera.position.z = 400; //Create Scene with geometry, material-> mesh scene = new THREE.Scene(); geometry = new THREE.IcosahedronGeometry( 200, 3 ); material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1 } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); </code></pre> </answer> <answer tick="false" vote="0"> <p>这是 WestLangley 显示的模式的另一种变体：</p> <p>HTML：</p> <pre><code><div class="relative h-256 w-256"> <div id="scene"></div> </div> </code></pre> <p>CSS：</p> <pre><code>#scene { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .relative { position: relative; } .h-256 { height: 256px; } .w-256 { width: 256px; } </code></pre> <p>JavaScript：</p> <pre><code>this.mount = document.querySelector('#scene'); this.width = document.querySelector('#scene').offsetWidth; this.height = document.querySelector('#scene').offsetHeight; ... this.renderer = new THREE.WebGLRenderer({ alpha: true }); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(this.width, this.height); this.mount.appendChild(this.renderer.domElement); </code></pre> <p>Three.JS 在 <pre><code><canvas></code></pre> 容器内渲染 <pre><code>div#scene</code></pre> 元素，该元素绝对定位以填充包装器。大小由包装器 div 的尺寸控制。</p> </answer> </body></html>

html5-canvas three.js

回答 0 投票 0

html5-canvas 相关问题

最新问题