viewport 相关问题

我想问一下，如果我把画布放在div容器中，那么画布的视口是多少？是div吗？我不明白“viewportTransform”指的是视口。我想问一下，如果我把画布放在div容器中，那么画布的视口是多少？是div吗？我不明白“viewportTransform”指的是视口。 <div id="container" style="width: 800px; height: 600px;"> <canvas id="canvas" width="800" height="600"></canvas> </div> 术语“视口”可能有点令人困惑，因为它可以根据上下文指代不同的事物。当涉及到容器内的元素时，画布的视口本质上是画布本身的区域，而不是容器。画布元素尺寸： canvas 元素的大小由其 width 和 height 属性决定： <canvas id="canvas" width="800" height="600"></canvas> canvas 元素的大小为 800 像素 x 600 像素。这个尺寸定义了画布的绘图区域，也就是它的视口。 Div 容器：容器： <div id="container" style="width: 800px; height: 600px;"> <canvas id="canvas" width="800" height="600"></canvas> </div> 容器与画布具有相同的尺寸。但是，的大小不会影响画布绘图区域的大小。可以是任何大小，并且画布仍然具有由其宽度和高度属性定义的自己的独立大小。视口变换：术语 viewportTransform 通常在 Fabric.js 等库的上下文中使用，它为画布操作提供了更高级别的抽象。在 Fabric.js 中，viewportTransform 指的是应用于画布上下文以处理平移和缩放等操作的转换矩阵。此转换会影响画布内容的渲染方式，但不会更改画布元素本身的实际大小。在summary中，canvas元素的视口是指由其宽度和高度属性定义的其自身尺寸。 viewportTransform 与画布内容的转换方式相关（例如平移和缩放），但不影响画布视口本身的实际尺寸。

javascript fabricjs viewport

回答 1 投票 0

iPhone 视口被截断 - 这一定是一个常见问题吗？

大家早上好，我需要有关 iPhone 视口问题的帮助。我筛选了各种帖子，都是 8 年前的。有些人有类似的问题，有些人有确切的问题。看起来实际上没有...

css iphone viewport

回答 1 投票 0

如何使用 javascript/jquery 获取元素的*渲染*宽度？尝试的所有方法仅产生内在宽度

我有一个带有这样的html的滑块 |高度：70vh； |高度：100%；我有一个带有这样的 html 的滑块 <div id="bilder"> | height: 70vh; <div id="pappediv"> | height: 100%; <div id="slider"> | height: 70%; <div id="imagecontainer"> | height: 100%; <p> | height: 100%; <img> | height: 100%; <img> | height: 100%; <iframe> | height: 100%; （大约 12 张图片和 1 个 iframe。所有元素均已关闭，为简洁起见，此处未显示。）我需要用所有图像的渲染宽度填充一个数组。为此，我使用以下 JavaScript： $(document).ready(function(){ var elements = $('#imagecontainer>p').children(); var widths = []; elements.each(function() { widths.push(this.width); }); console.log(widths); }); 该代码可以运行并为每个图像提供宽度值。这也意味着代码在照片可用后运行。问题是，返回的宽度值不是渲染宽度，它取决于视口高度，但始终与图像固有的相同“理想”宽度值。我尝试了其他几个属性，而不是“this.width”： outerWidth - the images have a padding, which is then included offsetWidth - same as outerWidth clientWidth - same elements.each(function() { rect = this.getBoundingClientRect(); widths.push(rect.width); }); 产量相同 elements.each(function() { var thiswidth = getComputedStyle(this).width; widths.push(thiswidth); }); 产生字符串形式的宽度，但也产生错误的值。我也用过 $(window).on('load', function(){..} 而不是 $(document).ready(function(){..} 没有成功。也许是时间问题？欢迎任何提示。使用 $(window).on("加载", function( ){ ... }) 是您等待图像加载所需的。请参阅下面的代码片段。请注意，我的 css 基于您在 html 中包含的高度信息。图像的固有宽度为 200 和 210。 $(window).on("load", function(){ var elements = $('#imagecontainer>p').children(); var widths = []; elements.each(function() { widths.push(this.width); }); console.log(widths); }); #bilder { height: 70vh; background-color: red; padding: 20px; } div { height: 100%; border: 2px solid black; } #slider { height: 70%; background-color: green; padding: 20px; } p { height: 100%; border: 2px solid yellow; } img { height: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <div id="bilder"> | height: 70vh; <div id="pappediv"> | height: 100%; <div id="slider"> | height: 70%; <div id="imagecontainer"> | height: 100%; <p> | height: 100%; <img src="https://placebear.com/g/200/300"> | height: 100%; <img src="https://picsum.photos/210/300"> | height: 100%; <iframe> </iframe> </p> </div>  </div>  </div>  </div>

javascript jquery width render viewport

回答 1 投票 0

如何在matter.js世界中移动相机？

我正在使用matter.js制作一款RTS游戏，类似于星际争霸。我想要实现的一件事是使用视口进行平移。我创造了画布和世界 const canvas = document.getElementById(...

javascript viewport bounding-box matter.js

回答 1 投票 0

如何让图形始终在视口中可见？

使用Tailwid和daisyUI组件库，我正在设计一个包含两个部分的页面。左侧部分包含文本和按钮。右侧部分是带有标题的图。我想要整个使用Tailwid和daisyUI组件库，我正在设计一个包含两个部分的页面。左侧部分包含文本和按钮。右侧部分是带有标题的图。我希望整个 <figure> 在视口中始终可见，并且图形保持其比例。这是我的代码： <div class="flex flex-col md:flex-row bg-green-300 items-center max-w-none space-x-10 px-10 h-screen"> <section class="align-middle justify-center"> <article class="prose py-10"> <h1>404 – Không tìm thấy trang</h1> <p> Liên kết rút gọn với đuôi <code>{đuôiRútGọn}</code>{" "} chưa từng được tạo hoặc đã bị xoá trên hệ thống. Liên hệ người gửi liên kết cho bạn để được hỗ trợ. </p> </article> <button class="btn"> <a href="/">Tạo liên kết khác</a> </button> </section> <section class="align-middle"> <figure class="max-h-fit"> <img src="https://placehold.co/2048x1488" alt="Tranh vẽ hai nguời đang trò chuyện với nhau ở quán nước vỉa hè" /> <figcaption> Tranh: <a class="prose" href="https://doi-thoai.deno.dev/TheLinhRab.doi-thoai.1">Linh Rab</a> </figcaption> </figure> </section> </div> 顺风游乐场当视口的高度足够高时，效果很好：但是当视口的高度足够低时，它的工作方式会很奇怪：我尝试了各种 Max-Height 类，但没有一个有效。你有什么想法吗？您可以考虑将 max-height 的 <figure> 设置为 100vh。这将反映根 height 的相同 <div>。然后，使用垂直弹性布局根据需要缩小 <img> 高度： <script src="https://cdn.tailwindcss.com/3.4.4?plugins=typography"></script> <div class="flex flex-col md:flex-row bg-green-300 items-center max-w-none space-x-10 px-10 h-screen"> <section class="align-middle justify-center"> <article class="prose py-10"> <h1>404 – Không tìm thấy trang</h1> <p> Liên kết rút gọn với đuôi <code>{đuôiRútGọn}</code>{" "} chưa từng được tạo hoặc đã bị xoá trên hệ thống. Liên hệ người gửi liên kết cho bạn để được hỗ trợ. </p> </article> <button class="btn"> <a href="/">Tạo liên kết khác</a> </button> </section> <section class="align-middle"> <figure class="max-h-screen flex flex-col items-start"> <img src="https://placehold.co/2048x1488" alt="Tranh vẽ hai nguời đang trò chuyện với nhau ở quán nước vỉa hè" class="flex-1 min-h-0"/> <figcaption> Tranh: <a class="prose" href="https://doi-thoai.deno.dev/TheLinhRab.doi-thoai.1">Linh Rab</a> </figcaption> </figure> </section> </div>

css tailwind-css viewport daisyui

回答 1 投票 0

使背景图像占视口的 100%

我正在寻找一种解决方案，使我的打开背景图像成为 100% 的视口。使用 Josh powel 的答案后，它可以在 Mac 上的 Chrome 上运行，但不能在任何其他浏览器上运行（都不能在 Mac 上...

css background-image viewport

回答 1 投票 0

viewport 相关问题

最新问题