标签: transform
操作变换实现(不是javascript)
我正在寻求实现多用户操作转换,仅用于在网站上的服务器端进行基于纯文本的更改.
是否有可以推荐的非JavaScript实现？
推荐指数
解决办法
查看次数
使用画布获取转换后的坐标
如果我在画布上使用像translate/这样的转换函数rotate，那么所有点在传递给任何画布函数时都会被转换。这就像一个魅力，但是否还有一种方法可以在不实际绘制的情况下简单地获得转换点？
这在调试时非常有用。我现在所能做的就是查看该点的结束位置，但我似乎无法获得计算出的变换坐标。
那么，假设我旋转 90 度，是否有任何函数可以获取一个点（即(10, 0)）并将变换后的点返回（即(0, 10)）？
我的意思基本上是这样的：
ctx.rotate(90 * Math.PI / 180);
ctx.transformed(10, 0); // would return (0, 10) as an array or something
推荐指数
解决办法
查看次数
如何在wpf中获取多个项目的边界框？
我有几个项目，我想计算它们可以适合的最小矩形，但项目旋转到一定程度，或倾斜或两者兼而有之。那么我如何获得可以包含所有矩形的最小矩形？
推荐指数
解决办法
查看次数
如何将文本转换为输入？
我如何创建诸如：
- 有一些文本
- 我点击它
- 它转换为包含我点击的文本的输入。
推荐指数
解决办法
查看次数
CSS Transform Scale 在 Chrome、Safari 中不起作用
我查看了此处发布的不同答案，但没有任何效果对我有用...
内容：我有一个缩小到 0.6 的 div，调用时应该放大到 1（100%）。
问题：在 Firefox 中，#myDiv 正在按预期扩展，但在 Chrome 或 Safari（在 Mac 上）中没有任何反应。
我有这个 DIV 代码：
#myDiv {
-moz-animation: changeSize 1s ease-out .5s forwards; /* Fx 5+ */
-webkit-animation: changeSize 1s ease-out .5s 0 forwards; /* Safari 4+ */
-o-animation: changeSize 1s ease-out .5s forwards; /* Opera */
-webkit-transform: scale(0.6);/* Saf3.1+, Chrome */
-moz-transform: scale(0.6); /* FF3.5+ */
-ms-transform: scale(0.6); /* IE9 */
-o-transform: scale(0.6); /* Opera 10.5+ */
transform: scale(0.6);
display: inline-block;
opacity:100;
background-image: url(img.png);
width: 154px; …推荐指数
解决办法
查看次数
在Webkit中应用基于百分比的2D变换时,防止半像素位置
当在webkit中使用百分比应用2D变换时,在这种情况下translateY(-50%),如果对象大小不均匀,则结果将是模糊边缘.
有人知道如何防止这种影响吗？
检查此示例,红色背景框具有顶部和底部模糊边缘.
推荐指数
解决办法
查看次数
如何缩放容器以匹配其缩放(或以其他方式转换)的内容？
我有一个<div>,其中一些复杂的内容是通过应用比例变换呈现的.我的问题是,<div>即使没有应用变换,它也会占用相同的空间.我制作了一个jsFiddle片段来说明我的意思.
我认为我可以理解为什么行为是这样的,但是有没有办法让它使容器占用尽可能多的空间与缩放(和其他转换,如果可能)应用？
我要指出,明确的设定width和height对的<div>外影响缩放文本的内容(这是不是在我的情况下,预期的行为).将缩放内容放在一个<iframe>是我想要避免的.
推荐指数
解决办法
查看次数
Chrome会在canvas元素上以不同方式转换文本.为什么？
似乎Chrome强制在canvas元素顶部的文本上进行硬件加速转换.
任何人都可以帮我理解这种行为吗？最终,我想在没有将文本转换为纹理的情况下在canvas元素上缩放文本.
这个小提琴显示了这个问题:http://jsfiddle.net/Gb6h4/1/
这是代码:
// Get a reference to the canvas and its context
var $canvas = $("canvas");
var ctx = $canvas[0].getContext('2d');
// Make the canvas fullscreen
var width = $(window).width(),
height = $(window).height();
$canvas.attr({
width: width,
height: height
});
// In Chrome, modifying the canvas context in any way
// seems to force a hardware-accelerated transform
// on the text.
// (The text is scaled as a texture, becoming blurrier.)
// Uncomment the line …推荐指数
解决办法
查看次数
使用css变换移动时,SVG图像变得模糊和闪烁
使用CSS转换时,我该怎么做才能避免图像模糊/闪烁问题？我尝试过CSS转换效果的一堆建议让图像模糊/移动图像1px,在Chrome中？,但似乎无法搞清楚.
我在下面附上了plunker代码.
https://plnkr.co/edit/kXbrxjnD0llt3u8dBujv?p=preview
的index.html
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<img src="usequities_green.svg" class="sample_fixed_income">
<section class="sectors">
<div class="container index-container-responsive">
<div class="row">
<div class="sectors-icon">
<img src="usequities_green.svg" class="sectors-icon-container fixed_income">
</div>
</div>
</div>
</section> </body>
</html>
style.css文件
/* Styles go here */
.sectors {
background-color: #30B784;
color: white;
display: flex;
height: 680px;
align-items: center;
justify-content: center;
position: relative;
}
.sectors__section__title {
font-size: 32px;
line-height: 48px;
}
.sectors-icon .sectors-icon-container{
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: ease-in-out;
background-color: white; …推荐指数
解决办法
查看次数
CSS Zoom属性不适用于BoundingClientRectangle
使用“ zoom”属性转换元素后，获取元素的坐标时遇到麻烦。我需要知道所有4个角的坐标。我通常使用getBoundingClientRect属性来完成此操作，但是在缩放元素时似乎无法正常工作。我附加了一个简短的jsfiddle链接，以显示似乎无效的内容。我正在使用Chrome，但Firefox上也存在该行为。
http://jsfiddle.net/GCam11489/0hu7kvqt/
HTML：
<div id="box" style="zoom:100%">Hello</div><div></div><div></div>
JS：
var div = document.getElementsByTagName("div");
div[1].innerHTML = "PreZoom Width: " + div[0].getBoundingClientRect().width;
div[0].style.zoom = "150%";
div[2].innerHTML = "PostZoom Width: " + div[0].getBoundingClientRect().width;
当我运行该代码时，缩放前后的宽度都显示为“ 100”。
我发现了很多信息，但是我发现的所有内容似乎都说这是Chrome上的已知错误，并已得到修复。有谁知道如何纠正或我可能做错了什么？
推荐指数
解决办法
查看次数