unaJ
2017-09-05 02:44给图片设置坐标,旋转后,怎么让坐标值跟着一起旋转?
点击图片,在当前位置加上一个相对于图片的坐标点,我是相对于屏幕加的,如果要旋转或者放大图片的话,坐标点位置不会改变,坐标点的值也不会随着图片的旋转和放大变化。
怎么能改变这个bug?让图片上的坐标跟随者图片转动,并且坐标值也会随图片的比例改变相应的值?
js代码 和 图片效果
$('#canvas')[0].onclick = function (e) {
var x = (e || window.event).clientX + scrollX, // 鼠标的X位置
y = (e || window.event).clientY + scrollY, //鼠标的Y位置
imgX = $('#canvas')[0].offsetLeft + 20, // 图片距离左边的位置
imgY = $('#canvas')[0].offsetTop + 20, // 图片距离右边的位置
imgW = $('#canvas')[0].offsetWidth, // 图片的宽度
imgH = $('#canvas')[0].offsetHeight; // 图片的高度
var pointY = y - imgY, // 点的Y坐标
pointX = x - imgX; // 点的X坐标
var inkDiv = document.createElement('div');
inkDiv.className = 'ink';
$('#info')[0].appendChild(inkDiv);
if (x >= imgX && x <= imgX + imgW) {
inkDiv.style.display = 'block';
inkDiv.style.top = (y - 25) + 'px';
inkDiv.style.left = (x - 17) + 'px';
inkDiv.innerHTML = 'w:' + pointX + ' h:' + pointY;
var pointDiv = document.createElement('div');
pointDiv.className = 'point';
pointDiv.style.top = (inkDiv.offsetHeight + 6) + 'px';
inkDiv.appendChild(pointDiv);
var closeSpan = document.createElement('span');
closeSpan.className = 'close';
closeSpan.innerText = '×';
closeSpan.style.left = (inkDiv.offsetWidth - 5) + 'px';
inkDiv.appendChild(closeSpan);
}
var closes = document.getElementsByClassName('close');
for (var i = 0; i < closes.length; i++) {
var index = i;
closes[i].onclick = function () {
this.parentNode.remove();
}
}
var inks = document.getElementsByClassName('ink');
var zIndex = 10;
for (var i = 0; i < inks.length; i++) {
inks[i].onclick = function () {
zIndex++;
this.style.zIndex = zIndex;
}
}
}
- 点赞
- 回答
- 收藏
- 复制链接分享
1条回答
为你推荐
- 在 ggplot2中旋转和限制轴标签
- ggplot2
- labels
- r语言
- 0个回答
- matplotlib共用x轴标签旋转问题
- python
- matplotlib
- 2个回答
- 一个div需要不停的出现,问题是需要实现位置变化
- javascript
- class
- 11个回答
- 程序运行后返回结果为#QNAN;求解
- 矩阵运算
- c++
- 3个回答
- 关于rotate和translate的两个问题
- javascript
- css3
- 1个回答
换一换