zooming 相关问题

缩放是指与在图形用户界面中缩放查看区域相关的问题。

使用 .digitalCrownRotation() 修饰符时在 ScrollView 中禁用数字表冠滚动

我正在开发一个 SwiftUI 修改器 (ZoomableModifier),主要用于使图像可缩放。我希望它可以在 iOS 和 watchOS 上运行,特别是在 watchOS 上。我想要它...

回答 1 投票 0

启用滚动视图缩放

我的 ScrollView 中放置了某些数据。我想让它放大/缩小。它包含简单的ImageView和TextView。 任何建议都会有帮助。 谢谢。 这是我的代码: ...

回答 2 投票 0

使用 API 为 Google 地图创建“放大镜效果”

我可以使用普通的 Google 地图 API 功能放大 Google 地图。例如,我在地图上绘制一个边界框,Google API 将按默认值设置的量进行放大。 ...

回答 1 投票 0

缩放身体浏览器

我会添加我的网站按钮 A + 和 A- 进行缩放。 我希望全身都是毛茸茸的 所以我创建了这段代码 .container{宽度:800px;背景:#000;...</desc> <question vote="3"> <p>我会添加我的网站按钮 A + 和 A- 进行缩放。 我希望全身都是毛茸茸的 所以我创建了这段代码</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;style&gt; .container{width: 800px;background: #000;} p{color:#fff;} a { color: #FFCC00;} &lt;/style&gt; &lt;div class=&#34;container&#34;&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.&lt;/p&gt; &lt;script type=&#34;text/javascript&#34;&gt; function ZoomScreen100() { document.body.style.zoom=&#34;100%&#34; } function ZoomScreen200() { document.body.style.zoom=&#34;200%&#34; } function ZoomScreen300() { document.body.style.zoom=&#34;300%&#34; } function ZoomScreen400() { document.body.style.zoom=&#34;400%&#34; document.body.style.zoom=&#34;400%&#34; } &lt;/script&gt; &lt;a href=&#34;#&#34; onclick=&#34;ZoomScreen100()&#34;&gt;A+&lt;/a&gt; &lt;a href=&#34;#&#34; onclick=&#34;ZoomScreen200()&#34;&gt;A+&lt;/a&gt; &lt;a href=&#34;#&#34; onclick=&#34;ZoomScreen300()&#34;&gt;A+&lt;/a&gt; &lt;a href=&#34;#&#34; onclick=&#34;ZoomScreen400()&#34;&gt;A+&lt;/a&gt; &lt;/body&gt; </code></pre> <p> 它适用于 Chrome、Internet Explorer、Safari,但不适用于 Firefox 和 Opera。为什么?</p> </question> <answer tick="true" vote="6"> <p><pre><code>zoom</code></pre>是一个非标准属性,<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=390936" rel="nofollow noreferrer">尚未被Firefox实现</a>,最接近的跨浏览器属性是<pre><code>transform</code></pre>(<a href="http://jsfiddle.net/Akm4D/1" rel="nofollow noreferrer">demo</a>):</p> <pre><code>document.body.style.transform = &#39;scale(2)&#39;; </code></pre> <p>但是,效果与应用<pre><code>zoom</code></pre>不同:父上下文(例如宽度、高度)不会更新。如果这是您的意图,您可能需要考虑使用 <pre><code>calc()</code></pre> 和所选属性的乘数:</p> <pre><code>document.body.style[&#39;--zoom&#39;] = &#39;2&#39;; document.body.style.fontSize = &#39;calc(16px * var(--zoom))`; </code></pre> </answer> <answer tick="false" vote="1"> <p>看看 <a href="http://www.browsersupport.net/CSS/zoom" rel="nofollow">http://www.browsersupport.net/CSS/zoom</a>。我无法让它在 Firefox 或 Opera 中正常工作,最直接的解释是这些浏览器还没有实现对它的支持。 (Firefox 23.0.1 通过了链接站点上的一项测试;Opera 12.16 均未通过。)</p> <p>这不是你写的——而是你提到的浏览器还没有准备好。 (这并不奇怪——尽管你会发现网站告诉你缩放是在规范中的,但我在实际的 w3c 文档中找不到它的任何地方列出。也许是在喝了更多咖啡因之后......)</p> <p>话虽这么说,请记住,兼容的页面将有一个元素,这就是样式所在的位置。我认为这是一个快速的冲刺,你忘记了头部元素。 :)</p> </answer> <answer tick="false" vote="1"> <p><a href="https://stackoverflow.com/a/64473943/3534015">https://stackoverflow.com/a/64473943/3534015</a></p> <p>最好的解决方案是使用 <pre><code>zoom: 50%</code></pre></p> <p>我用 javascript 做了这个例子,你可以测试它并根据需要更改它</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var zoomediv = document.getElementById(&#39;zoomediv&#39;) var zoomin_button = document.querySelector(&#39;#zoomin&#39;) zoomin_button.addEventListener(&#39;click&#39;, function(){ zoomediv.style.zoom = &#39;125%&#39; }) var zoomout_button = document.querySelector(&#39;#zoomout&#39;) zoomout_button.addEventListener(&#39;click&#39;, () =&gt; { zoomediv.style.zoom = &#39;75%&#39; })</code></pre> <pre><code>div { background: #f0f0f0; border: 1px solid #e0e0e0; width: fit-content; padding: 1rem; margin-bottom: 1rem; } button { padding: 0 3rem; }</code></pre> <pre><code>&lt;div id=&#34;zoomediv&#34;&gt; &lt;h1&gt; Title &lt;/h1&gt; &lt;p&gt; this is a paragraph &lt;/p&gt; &lt;/div&gt; &lt;button id=&#34;zoomin&#34;&gt; &lt;h1&gt; + &lt;/h1&gt; &lt;/button&gt; &lt;button id=&#34;zoomout&#34;&gt; &lt;h1&gt; - &lt;/h1&gt; &lt;/button&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>不错 但这不是真正的缩放比例</p> <p>模拟时钟时间选择器不工作 和 添加时隙是目标</p> <p><a href="https://ldijkman.github.io/randomnerd_esp32_wifi_manager/mrs/create_from_scratch/testarea/zoomtest.html" rel="nofollow noreferrer">https://ldijkman.github.io/randomnerd_esp32_wifi_manager/mrs/create_from_scratch/testarea/zoomtest.html</a></p> <p><a href="https://i.stack.imgur.com/YLe4M.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL1lMZTRNLnBuZw==" alt=""/></a></p> </answer> </body></html>

回答 0 投票 0

响应式设计问题:放大/缩小时元素移位和重叠[关闭]

我是网页设计的初学者,我在网站上遇到了响应式设计的挑战。当我放大网站时,容器内的元素分散得太远,导致

回答 1 投票 0

HTML/CSS 中浏览器放大/缩小时容器项重叠和位移问题

我是这个领域学习网页设计的初学者,所以我面临这个问题 当我放大网站时,容器内的元素往往会彼此远离,从而导致

回答 1 投票 0

VSCode 放大.png

有没有办法在 VSCode 中放大图像(特别是 .png)?我的存储库包含一些非常小的图像,我想在不打开其他应用程序的情况下查看它们。我以为...

回答 2 投票 0

如何根据矩形的可见性向可缩放面板动态添加和删除滚动条

我正在尝试在一个有限的、更大的红色矩形内操纵一些蓝色矩形。 我将其与放大和缩小功能一起使用 问题是我想显示

回答 1 投票 0

当浏览器缩放发生变化时,内联文本元素的高度是如何计算的?

因此,内联文本元素的实际高度不仅仅是字体大小值,而是由单个字体的指标决定,如本答案中所述(另请参阅本文)。 所以对于...

回答 1 投票 0

React-chartjs-2:重置缩放

我正在使用react-chartjs-2创建条形图。我也在使用缩放插件。现在我想创建一个按钮来重置缩放。对于普通的图表,它通过调用 .resetZoom() 函数来工作......

回答 2 投票 0

如何获取ScrollPane中内容节点的坐标?

我正在尝试实现一个具有与 CorelDraw/InDesign 类似功能的 ScrollPane:ScrollPane 中的一张纸可以四处移动(更改视口)并且可以放大/缩放...

回答 1 投票 0

我的 WIX 移动网站默认具有“缩小”功能,看起来视口适合整个屏幕

我正在开发一个非常简单的 Wix 网站。但是,在移动视图中,我可以“缩小”我的网站,将我的所有页面仅显示在一个视图中(或将所有网站显示在全屏中)。这不会发生...

回答 0 投票 0

为医生和患者提供有关Wordpress的视频咨询插件

我正在寻找有关医生和患者之间视频咨询插件的建议,因为这将成为预约此类咨询+支付费用的系统的一部分

回答 0 投票 0

禁用时如何禁用 VictoryZoomContainer 的平移钩?

我的 VictoryZoomContainer 的平移功能与鼠标挂钩,即使我通过 React 状态禁用它也是如此。我在屏幕上拖动光标时禁用了平移功能,但是当我重新...

回答 0 投票 0

自定义复选框(单选)在缩放时不居中

我正在为 chrome 浏览器写一个扩展。将带有两个自定义复选框和标签的块添加到我需要的页面。问题是在缩放页面的时候,ra的内部选择...

回答 0 投票 0

如何处理使用缩放 +/- 的用户并在我的 HTML 中仍然保持响应能力

我的问题是标记效果很好并且响应迅速,但是如果用户使用 chrome 或 edge 中的缩放功能 -/+ 图像没有响应,它会保持完全相同的大小。注:我的形象是

回答 0 投票 0

How to programmatically zoom to Elements in D3 in responsive map?

我有一个使用 d3.xml 导入的 SVG,当我单击 SVG 中的一个省略号时,我试图放大。这几乎可以工作,虽然我缺少定位的一些功能......

回答 1 投票 0

如何放大 React Native D3.js 图表

我正在尝试将 D3.js 库与 React Native 一起使用。然而,我设法渲染了一个 D3 折线图,但现在我需要在我的图表上添加缩放事件。我无法添加缩放所以我认为这是

回答 0 投票 0

缩放内联 3D matplotlib 图*无需*使用鼠标?

这个问题解释了如何通过指定仰角和方位角来更改 matplotlib 中 3D 图的“相机位置”。 ax.view_init(elev=10,azim=20),例如。 有没有simi...

回答 2 投票 0

像浏览器上的缩放功能一样在网站上缩放

我喜欢在某些屏幕分辨率下缩放我的页面(80% 或 90%) 我做了一些研究,发现 CSS 缩放不是标准,而且 CSS 缩放不适用于 Firefox。 我试过...

回答 0 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.