geometry 相关问题

我有以下 HTML 结构：代码笔附加到绿色我有以下 HTML 结构：代码笔 <body> <button onclick={appendBlueToGreen()}>Append To Green</button> <div id="red" style="transform: rotate(20deg); width: 100px; height: 100px; position: absolute; top: 50px; left: 50px; background-color: red;"> <div id="green" style="transform: rotate(20deg); width: 80px; height: 80px; position: absolute; top: 13px; left: 11px; background-color: green;"> </div> </div> <div id="blue" style="transform: rotate(45deg); width: 50px; height: 50px; position: absolute; top: 29px; left: 313px; background-color: blue;"></div> </body> 我想将 #blue 元素附加到 #green 元素，但 #blue 元素应保持其在屏幕上的确切位置。换句话说，#blue元素应该是#green元素的子元素，但其视觉位置和旋转应保持不变。因此，无论 #blue 元素附加到 #green、<body> 或任何其他元素，它都应该保持在与下图相同的位置。为了实现这一目标，我需要：计算#green和#red元素的绝对位置和旋转相对于文档正文。根据#blue元素调整位置和旋转计算 #red 和 #green 元素的位置和旋转，使得出现在屏幕上的相同位置，但在 #green 内元素。反向旋转 #blue 元件可消除应用于 #green 和 #red 元素的旋转。我正在努力找出正确的数学计算来实现这一目标。如果有人可以提供 JavaScript 解决方案来实现这一目标，我将不胜感激。这是我在人工智能的帮助下使用的代码来实现这一点，但没有成功：代码笔就涉及旋转而言，公式非常简单： newBlueRotation = originalBlueRotation - redRotation - greenRotation; 然而，对于元素的新位置来说，却出乎意料地复杂。这是因为每次旋转都是围绕与用于定位的参考点不同的中心进行的。中心是默认情况下 div 的中心，但可以使用更改 transform-originCSS 属性。因此，为了找到 element 的实际旋转中心，可以使用： window.getComputedStyle(element).transformOrigin 旋转中心和参考点之间的差异意味着，为了计算沿线包含的元素的位置，对于每个包含的元素，必须从参考点平移到中心，应用旋转，然后平移回来到参考点。例如，只有一个旋转矩形的参考点，即红色矩形通过这个操作找到（我希望这个伪代码符号是不言自明的）： redReferencePoint = redOffset + redCenter - redCenter * rotate(-red) 偏移量是元素相对于其父元素的位置（均假设绝对定位以便计算工作）。对红色->绿色->新蓝色元素顺序应用这些计算，设定新的蓝色元素的位置与原来的蓝色元素的位置相同的条件，就可以得到一个可以解出新的蓝色偏移量的方程，这个方程是巨大的： newBlueOffset = greenCenter - blueCenter + ( blueOffset + blueCenter - redOffset - redCenter - (greenOffset - redCenter + greenCenter) * rotate(-red) ) * rotate(red+green) 复杂的计算也导致结果为稍微不精确，可能是由于舍入错误 - 有时蓝色元素的微小“子像素”重新定位，也许在代码中可以更好地看到公式；此片段中的一些代码来自问题中的代码笔。 const appendBlueToGreen = () => { // Get the elements const blueElement = document.getElementById('blue'); const greenElement = document.getElementById('green'); const redElement = document.getElementById('red'); // Function to convert degree to radian const radToDeg = (deg) => (deg * 180) / Math.PI; // get the rotation center const getCenter = element => { try{ const [x, y] = window.getComputedStyle(element).transformOrigin.split(' ').map(parseFloat); return {x, y}; } catch(err){ // default is element center return {x: element.offsetWidth / 2, y: element.offsetHeight / 2}; } } // Function to get the rotation angle of an element (in radians) const getRotation = (element) => { const transform = window.getComputedStyle(element).transform; const matrix = transform.match(/^matrix$(.+)$$/); if (matrix) { const values = matrix[1].split(', '); const a = values[0]; const b = values[1]; return Math.atan2(b, a); } else { return 0; } }; const getOffset = (element) => { //return {x: parseFloat(window.getComputedStyle(element).left), // y: parseFloat(window.getComputedStyle(element).top)}; return {x: element.offsetLeft, y: element.offsetTop}; } const rotateVec = ({x, y}, theta) => { // rotate vector {x, y} by theta clockwise const cosTheta = Math.cos(theta), sinTheta = Math.sin(theta); return {x: x * cosTheta + y * sinTheta, y: -x * sinTheta + y * cosTheta}; }; const addVec = ({x: x1, y: y1}, {x: x2, y: y2}, ...rest) => { const sum12 = {x: x1 + x2, y: y1 + y2}; return rest.length === 0 ? sum12 : addVec(sum12, ...rest); } const negVec = ({x, y}) => ({x: -x, y: -y}); const roundToFixed = (x, digits) => x.toFixed(digits).replace(/\.?0+$/, ''); // Calculate the rotations const redRotation = getRotation(redElement); const greenRotation = getRotation(greenElement); const blueRotation = getRotation(blueElement); // calculate the offset positions of elements wrt their parents const redOffset = getOffset(redElement); const greenOffset = getOffset(greenElement); const blueOffset = getOffset(blueElement); // calculate the centers const redCenter = getCenter(redElement); const greenCenter = getCenter(greenElement); const blueCenter = getCenter(blueElement); let newOffset = addVec(negVec(greenOffset), negVec(greenCenter), redCenter); newOffset = rotateVec(newOffset, -redRotation); newOffset = addVec(newOffset, blueOffset, blueCenter, negVec(redOffset), negVec(redCenter)); newOffset = rotateVec(newOffset, greenRotation + redRotation); newOffset = addVec(newOffset, greenCenter, negVec(blueCenter)); // Set the new position and rotation for the blue element blueElement.style.position = 'absolute'; blueElement.style.left = `${roundToFixed(newOffset.x, 2)}px`; blueElement.style.top = `${roundToFixed(newOffset.y, 2)}px`; const newBlueRotation = roundToFixed(radToDeg(blueRotation - redRotation - greenRotation), 2); blueElement.style.transform = `rotate(${newBlueRotation}deg)`; // Append the blue element to the green element greenElement.appendChild(blueElement); console.log(blueElement.style.left, blueElement.style.top, blueElement.style.transform) this.event.target.setAttribute("disabled","d"); }; window.appendBlueToGreen = appendBlueToGreen; <button onclick={appendBlueToGreen()}>Append To Green</button> <div id="red" style="transform: rotate(20deg);width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;background-color: red;"> <div id="green" style="transform: rotate(20deg);width: 80px;height: 80px;position: absolute;top: 13px;left: 11px;background-color: green;"> </div> </div> <div id="blue" style="transform: rotate(45deg);width: 50px;height: 50px;position: absolute;top: 29px;left: 313px;background-color: blue;"></div>

javascript html geometry

回答 1 投票 0

寻找颗粒并确定其直径

问题是确定尽可能多且更精确的颗粒，以便将来按直径对它们进行分类目前，我已经尝试过定义圆的代码，但它不适合...

python opencv geometry

回答 1 投票 0

有没有办法通过插入合并点将领结多边形合并为有效多边形

我使用QGIS创建了一个shapefile，但是shapefile中的一些多边形在一个奇点处相交，创建了一个领结多边形。我希望添加一个与两个多边形相邻的点...

python geometry polygon shapefile qgis

回答 1 投票 0

三点求圆心的算法是什么？

我在圆的圆周上有三个点： pt A = (A.x, A.y); pt B = (B.x, B.y); pt C = (C.x, C.y); 如何计算圆心？在Processing (Java) 中实现它。我