草庐IT

swift - 将 ARFaceAnchor 与 SpriteKit 叠加层对齐

coder 2023-09-07 原文

我正在尝试计算特定几何点 ARFaceGeometry/ARFaceAnchor 上的 SpriteKit 覆盖内容位置(不仅仅是覆盖视觉内容)。

我正在使用计算出的世界坐标中的 SCNSceneRenderer.projectPoint，但结果是 y 反转并且未与相机图像对齐:

let vertex4 = vector_float4(0, 0, 0, 1)
let modelMatrix = faceAnchor.transform
let world_vertex4 = simd_mul(modelMatrix, vertex4)
let pt3 = SCNVector3(x: Float(world_vertex4.x),
                     y: Float(world_vertex4.y),
                     z: Float(world_vertex4.z))
let sprite_pt = renderer.projectPoint(pt3)

// To visualize sprite_pt
let dot = SKSpriteNode(imageNamed: "dot")
dot.size = CGSize(width: 7, height: 7)
dot.position = CGPoint(x: CGFloat(sprite_pt.x), 
                       y: CGFloat(sprite_pt.y))
overlayScene.addChild(dot)

最佳答案

根据我的经验，ARKit 的 projectPoint 函数给出的屏幕坐标在绘制到例如 CALayer 时可以直接使用。这意味着它们遵循描述的 iOS 坐标 here ，其中原点在左上角，y 是倒转的。

SpriteKit 有 its own coordinate system :

The unit coordinate system places the origin at the bottom left corner of the frame and (1,1) at the top right corner of the frame. A sprite’s anchor point defaults to (0.5,0.5), which corresponds to the center of the frame.

最后，SKNodes 被放置在一个 SKScene 中，它的原点在左下角。您应该确保您的 SKScene 与您的实际 View 大小相同，否则原点可能不在 View 的左下角，因此您从 View 坐标定位节点可能不正确。 this question的答案可能会有所帮助，特别是检查 View 的 AspectFit 或 AspectFill 以确保缩小场景。

The Scene's origin is in the bottom left and depending on your scene size and scaling it may be off screen. This is where 0,0 is. So every child you add will start there and work its way right and up based on position. A SKSpriteNode has its origin in the center.

因此，从 View 坐标和 SpriteKit 坐标转换的两个基本步骤是 1) 反转 y 轴，使原点位于左下角，以及 2) 确保您的 SKScene 框架与您的 View 框架匹配。

我可以稍后更全面地测试它，如果有任何问题，我会进行编辑

关于swift - 将 ARFaceAnchor 与 SpriteKit 叠加层对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53175812/

ARFaceAnchorSpriteKitcodesectionvertexswiftsprite-kitscenekitarkitface

有关swift - 将 ARFaceAnchor 与 SpriteKit 叠加层对齐的更多相关文章

  1. 微信小程序顶部标题栏与胶囊对齐 - 2

    介绍    最近在做微信小程序时，顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了，在另外一款手机差很多。我在查阅资料后，提出了一种方法解决这个问题，即：在页面onLoad或组件created时，利用微信小程序提供的API，获取系统状态栏高度和胶囊信息，进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证，能做到精准对齐。理论        胶囊样式应该是垂直居中，有1px的border，border-radius为18px。        若要使顶部标题栏与胶囊对齐，则其高度必须是导航栏高度，标题栏内容也要垂直居中，顶部标题栏的外边距或内边距必须是状态栏高度。        如果顶部

  2. ruby - Prawn :有没有办法让一个盒子里的所有内容垂直对齐？ - 2

    我正在尝试将一些内容垂直居中放置在bounding_box中。对于单个文本，这没问题:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"verticallyalignedinthesurroundingbox",:valign=>:centerend但是如果我的边界框中有多个元素，我该怎么办:bounding_box([0,bounds.top],:width=>pdf.bounds.right,:height=>pdf.bounds.top)dotext"vertic

  3. ruby - 如何将 ruby 字符串向左或向右对齐？ - 2

    我有几个ruby字符串，我想适本地左右对齐。我现在使用"Name".center(20,"")获取"(7spaces)Name(8spaces)"如何实现"Name(15spaces)"或"(15spaces)Name"谢谢。 最佳答案 "Name".ljust(19)"Name".rjust(19) 关于ruby-如何将ruby字符串向左或向右对齐？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/

  4. javascript - Chrome 和 Firefox 中的 SVG 文本对齐不一致 - 2

    我正在Leaflet.jsmap上绘制SVG标记图标。图标代表气象站，它们根据风向旋转，并以叠加层的形式显示平均风速。我已经能够让它在Chrome中按预期工作，但文本位置在Firefox中关闭。左边是Chrome(55.0.2883.95)，右边是Firefox(50.0.1)。这是我正在使用的自定义Leaflet.Icon类:window.RemoteWind=window.RemoteWind||{};//ThisusesChroma.jstobuildacolorscalewhichisusedforwindspeed.//http://gka.github.io/chroma.

  5. javascript - 如何在打印时对齐文本 - 2

    我有一个只有一行的HTML表格，当用户从中选择任何元素时，第一列会自动完成。我正在填充相应的字段，因此在填充所有数据后，我试图在用户点击print时将表格的某些列数据对齐。我正在使用@mediaprint但它什么也没做Pleasecheckoutthisfiddleconsole.clear()constdata=[//datatopopulateItemNamesearchinputfield{"ItemName":"Butter"},{"ItemName":"Rice"},{"ItemName":"Milk"},{"ItemName":"IceCream"},{"ItemName"

  6. javascript - 证明行中图像的对齐方式(ala Google Images) - 2

    我想在固定宽度上调整图像(Google图像正是这样做的，例如:here)有什么简单的解决方案吗？最后的办法是编写一个jquery脚本，计算它可以放入一行中的图像数量，并逐个迭代图像。对于可以使用text-align:justify...文本完成的事情来说似乎有点矫枉过正...... 最佳答案 使用显示:内联block；对于带有图像和文本的元素对齐:对齐；对于父元素。示例:...和CSS:.images{text-align:justify;}.imagesli{display:inline-block;}

  7. javascript - 通过 JS 插入时，具有内联 block 和文本对齐的 DOM 等距 div 将不起作用 - 2

    我一直在尝试实现ChrisCoyier的内联block+文本对齐解决方案，以在给定的包装宽度中自动水平分布div。http://css-tricks.com/equidistant-objects-with-css/当元素立即加载到DOM中时效果很好，但由于某种原因在通过JS以编程方式添加元素时失败。就好像浏览器只是忽略了css属性。查看此fiddle以获得一个非常基本的示例:http://jsfiddle.net/xmajox/NUJnZ/前两行是在HTML加载时添加的。单击该按钮可通过JS在运行时添加更多内容。最初我认为它可能与伪元素的使用有某种关系:after所以我尝试了一个带有

  8. javascript - 将 WMD 编辑器的预览 HTML 与服务器端 HTML 验证对齐(例如，没有嵌入的 JavaScript 代码) - 2

    关于如何对WMD编辑器生成的Markdown进行服务器端清理以确保生成的HTML不包含恶意脚本，如下所示:但我也没有找到堵住客户端漏洞的好方法。当然，客户端验证不能替代服务器上的清理验证，因为任何人都可以假装是客户端并向您发送令人讨厌的Markdown。而且，如果您在服务器上删除HTML，攻击者将无法保存错误的HTML，这样其他人以后就无法看到它，并且他们的cookie被盗或session被错误的脚本劫持。因此，有一个有效的案例表明，在WMD预览Pane中执行无脚本规则可能也不值得。但想象一下，攻击者找到了一种将恶意Markdown放到服务器上的方法(例如，来自另一个站点的受损提要，或

  9. javascript - Extjs 仅将单元格文本向右对齐 - 2

    我需要将单元格文本右对齐。{xtype:'numbercolumn',dataIndex:'lineAmount',id:'lineAmount',header:'NetLineamount',sortable:true,width:150,summaryType:'sum',css:'text-align:rigth;',summaryRenderer:Ext.util.renderers.summary.sum,editor:{xtype:'numberfield',allowBlank:false}添加对齐属性对我不起作用，因为它还会对齐标题文本 最佳

  10. javascript - 在节点边缘对齐标记 D3 强制布局 - 2

    我正在尝试实现d3力布局，但无法弄清楚如何以正确的方式放置我的链接标记。这是我到目前为止得到的:varlinks=force_data.force_directed_data.links;varnodes={};//Computethedistinctnodesfromthelinks.links.forEach(function(link){link.source=nodes[link.source]||(nodes[link.source]={name:link.source});link.target=nodes[link.target]||(nodes[link.target]

随机推荐