javascript - 通过AJAX发送动态绘制框的坐标
问题描述
我正在拍摄图像,保存第一次单击坐标,根据这些坐标绘制一个框,然后保存最终坐标。我尝试使用输出坐标console.log()
并跟踪正确的坐标。问题是它没有正确发布。
$(document).ready(function () {
var $selection = $('<div>').addClass('selection-box');
var firstClick = true;
$('#image')
.data("vals", {xstart: 0, ystart:0})
.on('dragstart', function(e) { event.preventDefault(); })
.mousedown(function(e) {
var xval = Number(e.pageX - $(this).offset().left);
var yval = Number(e.pageY - $(this).offset().top);
console.log(xval)
$("#image").data("vals").xstart = e.pageX - $(this).offset().left;
$("#image").data("vals").ystart = e.pageY - $(this).offset().top;
$selection.css({
'top': yval,
'left': xval,
'width': 0,
'height': 0
});
$selection.appendTo($('#image'));
$('#image').mousemove(function(e) {
var move_x = e.pageX - $(this).offset().left,
move_y = e.pageY - $(this).offset().top,
width = Math.abs(move_x - xval),
height = Math.abs(move_y - yval),
new_x, new_y;
console.log(xval)
new_x = (move_x < xval) ? (xval - width) : xval;
new_y = (move_y < yval) ? (yval - height) : yval;
$selection.css({
'width': width,
'height': height,
'top': new_y,
'left': new_x
});
}).mouseup(function(e) {
xend = Number(e.pageX - $(this).offset().left);
yend= Number(e.pageY - $(this).offset().top);
//console.log(xval, yval, xend, yend);
$.ajax({
url: '/view/getwords/',
type:"POST",
data: {
xval: xval.toString(),
yval: yval.toString(),
xend: xend.toString(),
yend: yend.toString(),
},
dataType: 'json',
success: function (data) {
console.log(xval, yval, xend, yend);
},
error:function(){
alert("Error");
}
});
$('#image').off('mousemove')
$selection.remove();
})
})
});
PS 这是我在 StackOverflow 上的第一个问题,所以如果我能更好地提出问题,请告诉我。
谢谢!
编辑:这是我使用的装箱代码片段。http://jsbin.com/ireqix/226/edit?html,js,output 本质上,我只是想从上面的代码片段中发布坐标。
解决方案
推荐阅读
- c# - 不能在字典上使用添加功能
- python - 使用不同格式的 Pandas python 更改日期列
- javascript - 新鲜的 vue cli 项目出现奇怪的 CORS 错误
- mediawiki-api - 通过 BotPasswords 登录并获取 HTML 页面内容的最简单方法
- linux - Raspian:在 eth0 上创建了多个 IP 地址
- python - 在 Python 中复制对象列表并保留其属性
- javascript - Google oauth2.0 与组织的网络应用程序?
- swift - Swift Vapor 3 从另一个内部调用路由器
- spring - 如何将 Zuul 与 Swagger 集成
- android - 即使数据库中存在数据,dataSnapShot.getValue() 也会返回 null