jquery - bug noticed rendering positions with javascript -
i have code first creates variable positions x,y positions of image it's width , height. select area(s) in image remove these positions clone of positions have the sum of positions in 2 different arrays.
var positions = []; var areas = {} var area_counter = 0; var image_width = $('.img-class')[0].naturalwidth; var image_height = $('.img-class')[0].naturalheight; var area = image_width * image_height; var img_width = 0; var img_height = 0; (counter = 0; counter < area; counter++) { positions.push([img_width, img_height]); img_width += 1; if (img_width == image_width) { img_width = 0; img_height += 1; } } var drop_boxes = $('.drop-box'); var area_grid = []; var image_width = $('.img-class')[0].naturalwidth; var image_height = $('.img-class')[0].naturalheight; drop_boxes.each(function() { var position = $(this).position(); var width = $(this).width(); var height = $(this).height(); var positions_clone = positions.slice(0); //console.log(positions_clone.length); var top_offset = parseint((position['top'] * image_width)/img_width); var left_offset = parseint((position['left'] * image_height)/img_height); position['top'] = top_offset; position['left'] = left_offset; var width_offset = parseint((width * image_width)/img_width); var height_offset = parseint((height * image_height)/img_height); var width_counter = 1; var height_counter = 1; var area = width_offset * height_offset; if (position['top'] < image_height-1 && position['left'] < image_width) { (counter = 0; counter < area; counter++) { var pos = [position['left']+width_counter, position['top']+height_counter]; var index = positions.findindex(function(item) { // return result of comparing `data` `item` // simple implementation assumes `item`s arrays. return pos.length === item.length && item.every(function(n, i) { return n === pos[i] }); }); if (index > -1) { positions_clone.splice(index, 1); } area_grid.push(pos); width_counter += 1; if (width_counter == width_offset) { width_counter = 1; height_counter += 1; } if (counter%100 == 0) { var percentage = math.round((counter/area)*100, 2); console.log("percentage: "+percentage+"%"); } } console.log(positions_clone.length); console.log(area_grid.length); areas[area_counter] = {'area': area_grid, 'positions': positions_clone}; parent.find('.area').text(area_counter); area_counter += 1; } });
problem when use these positions render image there's either offsetted position or missing positions. seen in these images. original image first example
Comments
Post a Comment