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

viewport 相关问题

最新问题