问题标签 [scaletransform]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
translation - 将多项式和中心缩放到鼠标位置时避免平移
在我的应用程序中,我在画布中有一个多边形(4 个点 = 矩形)。我想通过使用鼠标滚轮将多边形缩放一个因子。为此,我使用以下代码:
这很好用,当我将鼠标指针放在多边形中的点 P(假设 P 是靠近多边形左上角的点)并向上或向下滚动时。所以多边形根据那个点放大或缩小。但是当我将鼠标指针移动到另一个点 Q(靠近右下角)并继续放大或缩小时,多边形会向左上角移动一个量 s。似乎 s 的量取决于 P 和 Q 之间的距离。因此,如果 P 和 Q 之间的距离很大,则偏移量很大。
在这种情况下,期望的行为是多边形没有移动,而只是缩放到新的点 Q。
有谁知道,转变的原因是什么?我很感谢任何提示。
示例代码:
css - 缩放导致 CSS 形状之间的间隙
我有一系列 CSS 六边形。我想为不同的视口宽度应用 CSS 缩放变换,尽管我的六边形形状中出现了间隙。
这个问题在 Firefox 上以任何比例值都最为明显。如果缩放为非整数值,它也会出现在 Chrome 中。:before
Firefox 还在和伪元素中显示了令人费解的水平线:after
,尽管这些线位于边框的中心,而不是任何形状的边缘。
片段
下面是我的标记和样式的简化版本,也在JS Fiddle上。
HTML:
款式:
截图(Linux Mint)
Chrome:以 x2 缩放(在整数值处没有明显的间隙)
Firefox:以 x2 缩放(间隙,加上水平线)
有帮助吗?
我的猜测是这些线条出现是因为一些数字舍入,但我真的没有想法。有可能解决这个问题吗?我可以使用另一种方法来进行这种缩放吗?提前感谢您的任何回复。
c# - 将 ScaleTransform 应用于图形 GDI+
我把这个简单的代码放在一起画了一条线。现在我想将 a 应用ScaleTransform
到 10 倍;但下面的代码不起作用。
更新:
更新更改的正确方法是什么?我没有得到任何结果:(
c# - 为什么在使用 Graphics.ScaleTransform 时会出现 OverflowException?
我有一些我正在使用的编辑器的绘图代码。它画了几行和一个图像缓冲区。添加缩放功能并调用后,ScaleTransform
我的OverflowException
绘画方法被抛出。
某些东西是否超出了界限?我的比例因子是2.0
,我什至尝试过1.0
确保所有窗口大小/缓冲区都足够大。
java - reducing a double int[][] image to a smaller size
So in my code I am representing an image as a double int[][] array of 1's and 0's. I would like to be able to reduce the image to a smaller int[][] array. This is an example of what I am trying to do:
Is there any library that can do something like this for me? Or any ideas on how to write the code to do this for me. This would be the method prototype I am looking for:
c# - WPF ActualWidth 和 ActualHeight 未使用 ScaleTransform 缩放
我正在使用 WPF .NET 4.5.1。我在画布上添加了几个边框。在后面的代码中,我应用了一个 RenderTransform 以将它们全部缩放一定数量:
在其他地方,我尝试使用边框的 ActualWidth 和 ActualHeight,但它们没有被 XScale 和 YScale 值缩放。我也尝试过使用 LayoutTransform,但这也不起作用。
每当我想使用它们时,我是否需要让自己不得不将比例应用于 ActualHeight 和 ActualWidth?或者有没有更简单的方法?
更新:
我确实找到了一种使用 FrameworkElement 扩展方法的方法:GetBounds()。
我不确定它何时被添加到 .NET 框架中,但在这种情况下它确实很有帮助。它给了我确切的高度和宽度,以及我的控件相对于其他控件的位置,这是在转换后计算的。
如果有人有任何建议,我仍然希望听到更好的方法来做到这一点。
css - 使用变换比例属性缩放 div 内的内容
我正在尝试缩放 div 的内容(与浏览器缩放的行为相同)。经过大量搜索后,我发现 css 3 transform scale 属性将完全满足此要求。当我增加比例大小时内容正在缩放,但我丢失了 div 的内容。溢出:隐藏也没有帮助。
Js小提琴链接:http: //jsfiddle.net/chaitut715/k4WsB/
javascript - SVG 缩放不移动位置
我想要做的很简单:使用 vanilla js 将一些 SVG 点从悬停scale(0)
到scale(1)
兄弟元素悬停时缩放。他们是演示中的红色
这是基本的 SVG 设置
问题是 SVG 基于原点位置而不是当前位置进行缩放,因此当应用变换时,除了缩放元素之外,它还会移动元素。我试图通过BBox()
偏移、缩放、然后平移来解决这种情况,但这似乎只是帮助而不是完全解决问题。
我尝试同时使用setAttribute
CSS 的转换(我无法setAttribute
进行转换,大概是因为 CSS 无法对其进行动画处理),但两者都无法使用。我只在 Chrome 中测试过
任何人都知道我如何在不移动的情况下缩放红点?
如果你错过了,这里又是演示
编辑
我根据 RashFlash 的回答制作了一个函数,使其使用起来非常简单,并且还考虑了偏移和不同的变换原点
svg - 设置为非缩放笔划但在父 div 中缩放时的“矢量效果”
即使缩放父级,我也想保持 svg 的笔画宽度。
我正在尝试如下代码;
上面的效果很好,但我想做的是如下所示;
因此,如果父潜水按 5 缩放,笔画的输出也按 5 缩放。即使父 div 被缩放,我也希望将矩形的笔画宽度保持为 2 的固定大小。我可以得到帮助吗?
javascript - transform-origin 属性更改了几次
我需要能够多次缩放 div 并可以更改原点。
请看一下: http: //jsfiddle.net/croydufixe/vdXM7/(见下面的完整代码)
运行此小提琴时,将显示一个灰色正方形,并用红线网格将正方形划分为 4 x 4 。
红色标记位于下一个变换的“原点”。
在框架的顶部,您可以看到两个按钮“+”和“-”以增加(或减少)0.5 倍的比例缩放灰色方块
现在,请使用以下步骤:
- 单击 + 按钮:使用红色标记作为原点,灰色方块按 1+0.5 缩放
- 通过单击灰色方块的 25% 25% 重新定位红色标记
- 再次点击+按钮:灰色方块被缩放(1+0.5+0.5),但这个比例的原点是灰色方块的左上角而不是红色标记
- 再次单击“+”:使用红色标记作为原点,对灰色正方形进行缩放 (1+0.5+0.5+0.5)
我不明白第 3 步使用的原点(顶部/左侧,而不是 25%/25%)
感谢您的帮助。
完整代码: