Skip to content

Instantly share code, notes, and snippets.

@koohz

koohz/get-vertex-of-rotated-rect.markdown

Last active May 23, 2017 15:28
Show Gist options
  • Save koohz/80864a4c696ccaaf4c68cb4d741de68d to your computer and use it in GitHub Desktop.
Save koohz/80864a4c696ccaaf4c68cb4d741de68d to your computer and use it in GitHub Desktop.
Download ZIP
Get Vertex of Rotated Rect
Raw
index.html
<div class="tect"></div>
Raw
script.js
function rotate_point(pointX, pointY, originX, originY, angle, pointDim) {
if(!pointDim) pointDim = 3;
angle = angle * Math.PI / 180.0;
return {
left: (Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX) - pointDim,
top: (Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY)- pointDim
};
}
var deg = 74;
   var el =$(".tect");
var offset = $(".tect").offset();
   offset.centerX = offset.left + el.outerWidth() / 2;
   offset.centerY= offset.top+el.outerHeight() / 2;
   offset.right=offset.left+el.outerWidth();
offset.bottom=offset.top+el.outerHeight();
var tl = rotate_point(offset.left,offset.top,offset.centerX,offset.centerY, deg)
var vert1 = $("<div/>").addClass("vert").offset(tl).appendTo($("body"));
var tr = rotate_point(offset.right,offset.top,offset.centerX,offset.centerY, deg)
var vert2 = $("<div/>").addClass("vert").offset(tr).appendTo($("body"));
var bl = rotate_point(offset.left,offset.bottom,offset.centerX,offset.centerY, deg)
var vert3 = $("<div/>").addClass("vert").offset(bl).appendTo($("body"));
var br = rotate_point(offset.right,offset.bottom,offset.centerX,offset.centerY, deg)
var vert4 = $("<div/>").addClass("vert").offset(br).appendTo($("body"));
el.addClass("a")
Raw
style.scss
.tect { width: 200px; height: 100px; background-color:red; margin: 0; position: absolute; top: 150px; left: 250px; padding: 20px}
.tect.a { transform: rotate(74deg); }
.vert { position: absolute ; width: 6px; height:6px; background-color:blue; border-radius: 50%}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment