我在 SVG 中有一个矩形，我需要从特定点在枢轴上旋转。我能看到的最好的方法是变换到枢轴的 xy，旋转度数，然后再次变换。问题是第二次变换的 xy。我认为它会在某种程度上考虑 cos 和 sin，只是不确定在哪里或为什么。
*
|
|
|
将旋转 -90 度到
*---
也许我看错了，有人可以澄清吗？
我正在编写一个解决几何问题的程序.
我的算法不能很好地处理共线点.
是否有任何转换我可以应用于点摆脱共线性？
HTML：
<div></div>
CSS：
div {
width: 50px;
height: 50px;
background: red;
border: 10px solid yellow;
-webkit-perspective: 600px;
-webkit-transform: perspective(600);
-moz-transform: perspective(600);
transform: perspective(600);
}
这不起作用，它总是显示一个红色方块......我不明白为什么。我使用 Chrome 23
我有一个尺寸为50 x 50的按钮.在悬停时,我需要用70 x 70尺寸的按钮替换这个按钮.此外,过渡应该是顺利的.
所以,我正在尝试使用CSS转换和转换功能.也就是说,z轴上的transform3d.
<style>
.button1{
position:absolute;
top:0px;
left:0px;
display:inline-block;
width:50px;
height:50px;
background:url(images/button.png) no-repeat;
background-position:bottom left;
/* Transition */
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.button1:hover{
width:70px;
height:70px;
background-position:top left;
-webkit-transform: translate3d(0, 0, 10px);
-moz-transform: translate3d(0, 0, 10px);
-ms-transform: translate3d(0, 0, 10px);
-o-transform: translate3d(0, 0, 10px);
}
</style>
</head>
<body>
<a href="#" class="button1"></a>
</body>
我已经尝试了这个代码用于x和y变换,它的工作原理.但是,它不适用于z轴.
基本上,我想要一个平滑的缓动缩放效果悬停.
请建议.
最近几天我在学习“变换”，现在我知道如何通过变换的矩阵进行翻译、旋转、倾斜、缩放。但是如果我想在一个转换语句中完成上述所有操作，我该怎么做？
ctx.transform(a,b,c,d,e,f);
当我们想通过变换旋转某些东西时，我们必须为每个（a，b，c，d）发布 4 个参数，所以，如果我想旋转和缩放，例如，旋转 30 度和缩放（1.5,2），可以变换是同时完成的吗？那么 (a,b,c,d) 的值是多少？以及如何计算它们？
另一个问题：转换中有顺序吗？我的意思是如果我使用变换来旋转、缩放和平移，它们之间的顺序是什么？毕竟顺序很重要，“先翻译，再缩放”和“先缩放，再翻译”，会得到不同的结果。
我试图弄清楚如何从c#代码实例化预制件,我尝试了以下内容:
我创建了一个像这样的公共变换:
public Transform myItem;
然后我创建了一个预制件并将其命名为myPrefab并将其放在我的Assets/Resources文件夹中.
然后我在start()中调用:
myItem = Instantiate(Resources.Load("myPrefab")) as Transform;
运行代码时,Transform保持为空？
我错过了什么？任何帮助表示赞赏.
这是带有评论的小提琴：http : //jsfiddle.net/7xw1m1qd/1/
html例如：
<div class="droppable"></div>
<div class="drag"></div>
以JS为例：
$('.drag').draggable({});
$('.droppable').droppable({
out: function() {
$('.drag').css('background-color', 'red');
},
drop: function() {
$('.drag').css('background-color', 'green');
},
});
以 CSS 为例：
.droppable {
width: 200px;
height: 200px;
transform: scale(2);
-webkit-transform: scale(2);
-ms-transform: scale(2);
background-color: #C3C3C3;
}
.drag {
background-color: black;
width: 20px;
height: 20px;
z-index: 10;
position: absolute;
top: 10px;
left: 350px;
}
问题是：如果 droppable 被缩放（通过变换：缩放），它仍然使用 droppable 的原始尺寸，所以我只能在 droppable 的原始边界中放置元素。
我发现了一些类似的问题，但没有找到有效的解决方案。
我正在尝试扩展链接的图像并减少悬停时的不透明度.我将图像放在一个容器中,使其成为一个带有border-radius的圆圈,并且容器的溢出设置为隐藏.我有一切工作,除了当我悬停时,在再次隐藏溢出之前,整个图像会显示一小段时间.这是一个codepen模型:http://codepen.io/jphogan/pen/WbxKJG
我已经尝试了一些我在这里找到的解决方案,包括设置要显示的图像:块.我也试过设置背景颜色和溢出隐藏到容器而不是链接,但我有相同的结果.我尝试将隐藏的溢出添加到图像本身,尽管毫不奇怪,它什么也没做.我只需要过多的图像在整个过渡过程中保持隐藏状态.
这是CSS我现在设置的方式,虽然我已经经历了多次迭代尝试解决这个问题.我感谢任何帮助.谢谢!
.solutions_role_container {
text-align:center;
}
.role_img_container {
width: 70%;
margin: 0 auto;
}
a.solutions_role_image {
background:#000;
border-radius: 50%;
overflow: hidden;
display: block;
border: 1px solid #B1C3DA;
box-shadow: 0 4px 10px #C6C6C6;
}
.solutions_role_image img {
width:100%;
-moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
display:block;
overflow:hidden;
transform:scale(1);
}
a.solutions_role_image:hover img {
opacity:0.7;
transform:scale(1.08);
}
我正试图fabric.Circle在一个角上放置点(通过)fabric.Polygon.用户可以移动,缩放或旋转多边形.但是,在每次修改后,我想要使用多边形的新坐标来放置我的圆圈.
在深入研究这个主题的过程中,我发现了转换矩阵的这个很好的解释.我认为这是我想达到的目标的完美解决方案.但正如你在小提琴中看到的那样,我的观点总是远离我的多边形.
由于我对几何变换等不太坚定,我希望有人能找到我的错误并告诉我我错过了什么:)谢谢.
var canvas = new fabric.Canvas("c", {selection: false});
var polygon = new fabric.Polygon([
new fabric.Point(200, 50),
new fabric.Point(250, 150),
new fabric.Point(150, 150)
]);
polygon.on("modified", function () {
var matrix = this.calcTransformMatrix();
var transformedPoints = this.get("points").map(function(p){
return fabric.util.transformPoint(p, matrix);
});
var circles = transformedPoints.map(function(p){
return new fabric.Circle({
left: p.x,
top: p.y,
radius: 3,
fill: "red",
originX: "center",
originY: "center",
hasControls: false,
hasBorders: false,
selectable: false
});
});
this.canvas.clear().add(this).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});
canvas.add(polygon).renderAll();canvas { …我有很多名单.简而言之[[1,2],[3,4]].我需要生成每个元素的所有符号变化.因此,对于简短的例子,结果将是
[[1,2],[3,4],[-1,2],[1,-2],[-1,-2],[-3,4],[3,-4],[-3,-4]]
有没有包来执行这样的操作？否则我可以使用什么算法？(我承认我没有考虑过很多......).
这可以提供帮助,我的所有列表都有相同的长度.
嗯..也许是这样的想法:
x = [[2*i,2*j] | i <- [1, -1], j <- [-1,1]]
x
[[2,-2],[2,2],[-2,-2],[-2,2]]