- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Openframeworks 为 Reactivision 开发,我需要围绕一个圆放置一个 ofImage(可以放置在屏幕中的任何位置),并将它旋转特定角度。我附上一张图片来帮助解决这个问题。
http://i.stack.imgur.com/WCyPu.png
如你所见,x 轴和 y 轴从 0,0 到 1,1,我在屏幕中间有一个圆(圆心位于 0.5,0.5),半径为 0.42 (所以它不会填满屏幕)。
最终,用户将 ofImage(在本例中为红色笑脸)放置在屏幕上的位置 0.2,0.2 处。它的宽度和高度都是 0.08,旋转中心在它的左上角(和往常一样)。
我需要做的是拿那个笑脸,把它放在圆的周围,在最近的位置(如果转起来更容易,它可以跟随半径)它就可以旋转它,所以它会是面向圆心。
我还需要找到距离 ofImage 轴 0.04 0.04 处的笑脸“ Nose ”,移动它并旋转它以保持笑脸 Nose 而不是空隙中的一个点。最好的红色笑脸应该是绿色笑脸。
我的三角学有点生疏,我最好的方法也行不通。我在构造函数中定义了它的最终位置,并在 draw() 步骤中旋转了 Sprite 。
Smiley::Smiley(int _id, float x, float y)
{
smileyImg.loadImage("smiley.png");
float tangent = (0.5-x)/(0.5-y);
//angle is a private float variable;
angle = atanf(tangent);
//those 0.06 just lets me move the smiley a little over the circle itself
x = 0.5+cos(angle)*(RADIUS+0.06);
y = 0.5+sin(angle)*(RADIUS+0.06);
float xNose = 0.5+cos(angle)*(RADIUS+0.06);
float yNose = 0.5+sin(angle)*(RADIUS+0.06);
angle = ofRadToDeg(angle);
//pos and nose are Vector3 classes which hold three floats. Nothing too much important here
pos.set(x, y, 0.0);
nose.set(xNose, yNose, 0.0);
}
void Smiley::draw()
{
ofPushMatrix();
ofTranslate(pos.x,pos.y);
ofRotateZ(angle);
ofTranslate(-pos.x,-pos.y);
ofSetColor(255,255,255);
ofEnableAlphaBlending();
smileyImg.draw(pos.x,pos.y,0.08,0.08);
ofDisableAlphaBlending();
ofPopMatrix();
}
有人可以帮我解决这个问题吗?非常感谢。
编辑:采用@datenwolf 解决方案后,我得到的位置是完美的,但是当我将旋转和平移(或只是平移)放入转换矩阵时,它会使笑脸消失。我很确定我做错了矩阵:
Smiley::Smiley(int _id, float x, float y)
{
smileyImg.loadImage("smiley.png");
float distance = sqrt( pow((x - 0.46),2) + pow((y - 0.42),2));
Vector3 director((x - 0.46)/ distance, (y - 0.42)/ distance, 0.0);
pos.x = 0.46 + RADIUS * director.x;
pos.y = 0.42 + RADIUS * director.y;
float distanceNose = sqrt( pow((x - 0.46),2) + pow((y - 0.42),2));
Vector3 noseDirector((x - 0.46)/ distanceNose, (y - 0.42)/ distanceNose, 0.0);
nose.x = 0.46 + RADIUS * noseDirector.x;
nose.y = 0.42 + RADIUS * noseDirector.y;
/* matrix is a float matrix[16]. I think the indexing is ok, but even going from
0 4 8 12... to 0 1 2 3..., it still doesn't work*/
matrix[0] = -director.y; matrix[4] = director.x; matrix[8] = 0.0; matrix[12] = pos.x;
matrix[1] = director.x; matrix[5] = director.y; matrix[9] = 0.0; matrix[13] = pos.y;
matrix[2] = 0.0; matrix[6] = 0.0; matrix[10] = 1.0; matrix[14] = 0.0;
matrix[3] = 0.0; matrix[7] = 0.0; matrix[11] = 0.0; matrix[15] = 1.0;
}
void Smiley::draw()
{
ofPushMatrix();
glLoadMatrixf(matrix);
ofSetColor(255,255,255);
ofEnableAlphaBlending();
// Now that I have a transformation matrix that also transposes, I don't need to define the coordinates here, so I put 0.0,0.0
noseImg.draw(0.0,0.0,0.08,0.08);
ofDisableAlphaBlending();
ofPopMatrix();
}
此外,我需要根据每个笑脸旋转 Nose 的位置。你认为哪种方式最好?非常感谢
最佳答案
像往常一样,您不需要三角函数。设 C
为圆心,r
为半径,P
为用户点击的点。那么点击转换到圆上的位置U为
U = C + r * (P - C)/|P - C|
在哪里
| A | = sqrt(A_x² + A_y² + …);
所以在二维的情况下你得到
U.x = C.x + r * (P.x - C.x)/sqrt( (P.x - C.x)² + (P.y - C.y)² )
U.y = C.y + r * (P.y - C.y)/sqrt( (P.x - C.x)² + (P.y - C.y)² )
旋转可以用旋转矩阵 R 来描述,它由从圆 C 到 P 的方向和垂直于它的 T 组成。所以大胖编辑:归一化方向:
D = P - C = (P.x - C.x , P.y - C.y)/sqrt( (P.x - C.x)² + (P.y - C.y)² )
T = Z × D
另请注意,您可以根据 D
编写 U
U = C + r*D
用它来构造一个旋转矩阵
| T.x D.x |
R = | |
| T.y D.y |
R
是一个旋转矩阵,它遵循 T.y == D.x 并计算 T.x
T.x = -P.y + C.y = -D.y
所以
| -D.y D.x |
R = | |
| D.x D.y |
大胖 编辑:我在矩阵的最后一列使用了错误的组件。 是 U.{x,y}, 不是 D.{x.y}。不好意思!
我们可以把它放到一个完整的变换矩阵M中:
| -D.y D.x 0 U.x | | -D.y D.x 0 (C + r*D.x) |
M = | D.x D.y 0 U.y | = | D.x D.y 0 (C + r*D.y) |
| 0 0 1 0 | | 0 0 1 0 |
| 0 0 0 1 | | 0 0 0 1 |
您可以使用 glLoadMatrix 加载此矩阵以放置 Sprite 。
关于c++ - 在圆圈周围放置一个 ofImage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5290502/
我需要移动一个对象,在我的例子中是给定路径上的一个字符串。实际上路径可以是半圆。如附图所示,字符串应该出现在另一个物体的后面,沿着路径移动并消失在第二个物体(两个图像)后面。我不知道如何开始...希望
我需要构建一个圆形(在 css 中),它有 2 行文本,可以根据选择的翻译改变长度并始终居中。 到目前为止我有这个: h3 { background-color: #fcd141; borde
是否可以在 CSS3 中使用 -webkit-border-radius 绘制一个圆,同时将宽度和高度限制为特定变量(例如 height:100px 和 width:100px) 所以当在圆圈内添加文
我正在尝试在方形图像上叠加一个圆圈。文本需要在圆圈中水平和垂直居中。 我几乎用正方形 div 做对了,但是一旦我将图像放入组合中,圆圈就会移动到图像下方。 我的代码。 .Container { w
使用 CSS,我有一个将图标放置在圆圈/圆盘中的显示。 这是我的例子: 但我很难将图标放在圆圈/圆盘的中心。 我已经搜索过 SO(找到 this post 但更改行高只会扩展圆盘/圆圈)和 Googl
我正在尝试在一行中制作几个带有文本的 css 圆圈。当我使用 circle 类来 img 时,圆圈是内联的,但我无法添加任何文本。当我使用 circle class 到 div 时,我可以添加文本,但
我尝试在单击“提交”按钮时显示 ProgessBar。它会在数据加载完成时隐藏。但是,progressBar 没有覆盖整个屏幕。相反,它被按钮覆盖。请引用屏幕截图,它应该更容易理解我的意思。 我要实现
这个问题在这里已经有了答案: Circle with two borders (4 个答案) 关闭 7 年前。 我有一个只有一个边框的圆圈,但我想知道是否有办法实现一个有两个不同颜色边框的圆圈。我有
我正尝试按照以下示例在 CSS 中创建一个带有镶嵌边框的圆圈: 我有以下 HTML 和 CSS,但它没有产生我需要的效果: .inlay-circle { width: 15rem; heig
我找到的每个指南都有相同的线条和填充颜色。我想要的只是一个带有红线和白色填充的圆圈。 我试过: .circle { border: red; background-color: #FF
我正在寻找一种用纯色和图像填充 SVG 圆圈的方法。 我现在尝试的是使用这段代码: 它用我的背景图片绘制
我目前正在组建一个将托管用户的网站。每个用户都会有一个个人资料页面,该页面将显示 SVG 圆数组,每个用户在数据库的用户表中自己的行中也有一个相应的 SVG_number。 例如,如果 User1 在
我正在尝试在 SVG 中创建三组圆圈。我给他们打电话circleA circleB和circleC我打算给它们涂上不同的颜色。 var circleA = [ [50,48],[106,35]
使用 snapsvg.io,我想知道是否可以添加可点击的链接,例如 My Link标记到 SVG 文本、圆圈或线条。 我这里的一个例子是文本: var s = Snap("#svg"); var te
所以这是我的一个小项目,只是为了好玩。我尝试使用 libgdx 在 Java 中重新创建随机 Walker。 现在我认为我的代码非常成功,因为它工作正常(也许)。 但是有一个问题,圆比其他轴更倾向于向
我想在 CSS 中创建一个在右边和底部有线条的圆。类似下图。我找到了一个 css code水平连接圆圈。我不知道如何垂直添加线条或类似于我附加的图像?
以下圆形标签位于标签内: 现在我必须将生成的圆圈附加到标签内,例如 更新: function createCircle(a) { var circle = document.
我希望圆圈类似于饼图,具有相同的不同颜色切片。出于某种原因,我画了一个圆,在带有颜色的一侧有弧形,中间有一个白色八边形。 for(var i=0;i<8;i++){ ctx.beginPath
我有一个场景,我必须在样条图中创建标记/圆圈。我使用 highcharts 创建了样条图表,图表的代码如下。 我的输出应该如下所示。我已经在图像中标记了预期的圆圈: $(function ()
给定以下示例: 是否有可能检测到网络中的环路 (I1, I2,I3, C6, C7, I5)? 我试过:simple_cycles → 它适用于 3 个节点,但不能超过 3 个。 我需要检测包含所有节
我是一名优秀的程序员,十分优秀!