我正在尝试创建一种图像可以旋转的效果，并可以用一个点标记它。
我正在使用HTML / CSS和javascript或jquery，而不是挑剔的，因为我想先获得概念证明。我利用以下stackoverflow邮政编码创建点（和三角形）：Placing a dot on an image - onClick
这在旋转图像之前效果很好，但是我认为用于渲染点位置的坐标系未考虑图像移动。如果正确，那么转换会让我感到困惑。 ref：https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems
var dotCounter = 0;
if ($('#compassRotatingWheel').show()) { // Only when the compass side is showing
$(document).ready(function() {
$('#compassRotatingWheel').click(function(ev) { // only mark within the div
dotCounter++;
var evDot = ev;
var dotOrTriangle = e;
var newLeft, newTop;
switch (dotOrTriangle) {
case 'dot':
var getDivId = $(this).attr('id');
console.log("ID: " + getDivId);
//// This was an attempt to convert page coordinate system to cartesian coordinate system
// when pageX > 248
//if (ev.pageX > 248) {
// newLeft = ((((ev.pageX - 248) * Math.cos((angle))) - (ev.pageY * Math.sin((angle))))).toString() + 'px'; // + (248 - 12)).toString() + 'px';
//}
//else {
// // when pageX < 248
// newLeft = -((((248 - ev.pageX) * Math.cos((angle))) - (ev.pageY * Math.sin((angle))))).toString() + 'px'; // - (248 - 12)).toString() + 'px';
//}
//// When pageY > 292
//if (ev.pageY > 292) {
// newTop = ((((ev.pageY - 292) * Math.cos((angle))) + (ev.pageX * Math.sin((angle))))).toString() + 'px'; // + (292 - 55)).toString() + 'px';
//}
//else {
// // When pageY < 292
// newTop = -((((292 - ev.pageY) * Math.cos((angle))) + (ev.pageX * Math.sin((angle))))).toString() + 'px'; // - (292 - 55)).toString() + 'px';
//}
// Set x,y to new x'y' (prime) location ref: https://academo.org/demos/rotation-about-point/
// Account for wheel center (248,292) and padding offset 12 & 55
newLeft = ((((ev.pageX - 248) * Math.cos((angle))) - (ev.pageY * Math.sin((angle)))) + (228 - 12)).toString() + 'px';
newTop = ((((ev.pageY - 292) * Math.cos((angle))) + (ev.pageX * Math.sin((angle)))) + (292 - 55)).toString() + 'px';
var dot = $("#compassRotatingWheel").append(
$('<div id="dot' + dotCounter + '"></div>').css({
position: 'absolute',
left: newLeft, //((((ev.pageX - 252) * Math.cos((angle))) - (ev.pageY * Math.sin((angle)))) + (252 - 12)).toString() + 'px',
top: newTop, //((((ev.pageY - 286) * Math.cos((angle))) + (ev.pageX * Math.sin((angle)))) + (286 - 55)).toString() + 'px',
width: '5px',
height: '5px',
background: 'red',
borderRadius: '50%'
})
);
//parentDiv = this.Element.parentNode;
//alert("This is the parent Div: " + parentDiv);
//// LOTS of console.log debugging :/
showCoords(event);
console.log("TOP: " + newTop);
console.log("LEFT: " + newLeft);
console.log("offset() " + dot.offset().toString());
console.log("event.pageY: " + event.pageY);
console.log('')
console.log("Compare Dot Placement: \nX: " + event.pageX + "\nY: " + event.pageY + "\nAngle: " + angle);
console.log("DOT 1 - Element Coordinates: \nleft: " + dot1.getBoundingClientRect().left + "\ntop: " + dot1.getBoundingClientRect().top);
console.log("DOT 2 - Element Coordinates: \nleft: " + dot2.getBoundingClientRect().left + "\ntop: " + dot2.getBoundingClientRect().top);
console.log("DOT 3 - Element Coordinates: \nleft: " + dot3.getBoundingClientRect().left + "\ntop: " + dot3.getBoundingClientRect().top);
//console.log('Show Coordinates: ' + showCoords(event));
//console.log("Current angle: " + (angle * 60) + "\nRadians: " + degreesToRadians(angle) + "\n PageX: " + ev.pageX + " \nPageY: " + ev.pageY + "\nTop: " +
// (((ev.pageY - 55) * Math.cos(degreesToRadians(angle))) - (ev.pageX * Math.sin(degreesToRadians(angle)))) + "\nLeft: " +
// (((ev.pageX - 12) * Math.cos(degreesToRadians(angle))) - (ev.pageY * Math.sin(degreesToRadians(angle)))));
break;
case 'triangle':
// ref: https://css-tricks.com/the-shapes-of-css/
var triangle = $('#compassRotatingWheel').append(
$('<div id="triangle' + dotCounter + '"></div>').css({
position: 'relative',
top: topAdjust + 'px',
left: leftAdjust + 'px',
width: '0px',
height: '0px',
borderLeft: '5px solid transparent',
borderRight: '5px solid transparent',
borderBottom: '10px solid limegreen'
})
);
console.log("Compare Triangle Placement: \nX: " + event.pageX + "\nY: " + event.pageY + "\nAngle: " + angle);
console.log('Show Coordinates: ' + showCoords(event));
showCoords(event);
break;
default:
console.log('error: need to choose correct case');
}
$('#compassRotatingWheel').unbind('click');
});
});
};
function rotateWheel() {
innerWheel.mousemove(function(event) {
var intX = event.pageX;
var intY = event.pageY;
if (lastY == intY) {
if (intY > 292) {
if (lastX < intX) {
detectRotation('down');
} else {
detectRotation('up');
}
} else {
if (lastX < intX) {
detectRotation('up');
} else {
detectRotation('down');
}
}
} else if (intX > 248) {
if (lastY < intY) {
detectRotation('up');
} else {
detectRotation('down');
}
} else {
if (lastY < intY) {
detectRotation('down');
} else {
detectRotation('up');
}
}
lastY = intY;
lastX = intX;
blMouseMove = true;
//Use to find center coordinates of wheel
//console.log("Center x = " + intX.toFixed(2) + "\ny = " + intY.toFixed(2));
selectedWheel = "innerWheel";
//console.log("SelectedWheel = " + selectedWheel);
});
}
function removeWheelRotation() {
innerWheel.unbind("mousemove");
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compass Face Side -->
<div id="compass">
<div id="compassFaceSideFrame">
<!-- layered images -->
<div id="compassRotatingWheel" onclick="showCoords(event)" onmousedown="rotateWheel()" onmouseup="removeWheelRotation()">
<!--<div .center-div id="insideCompass"></div>-->
</div>
</div>
</div>
指南针轮已经旋转。当我放置一个点（或三角形）时，我希望它会是我实际视觉点击的地方。需要将其与实际的{pageX，pageY}相匹配，否则我认为更精确的说法是{x'，y'}素数以允许图像旋转。
参考：https://academo.org/demos/rotation-about-point/