unaJ 2017-09-05 02:44 采纳率: 15.4%
浏览 2928

给图片设置坐标,旋转后,怎么让坐标值跟着一起旋转?

点击图片,在当前位置加上一个相对于图片的坐标点,我是相对于屏幕加的,如果要旋转或者放大图片的话,坐标点位置不会改变,坐标点的值也不会随着图片的旋转和放大变化。

怎么能改变这个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条回答 默认 最新

  • Rattenking Python领域优质创作者 2017-09-05 07:28
    关注

    1,直接采用canvas的绘画,来画你这些点,这样点就在你的图片上,图片动,点就会跟着动
    2,对所有的点进行的图片相同的旋转操作,这个循环比较多,比较麻烦,建议采用第一个方法

    评论

报告相同问题?

悬赏问题

  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型