新浦京81707con > 注册购买 > 判断两个页面元素是否重叠的算法,图片裁剪技

原标题:判断两个页面元素是否重叠的算法,图片裁剪技

浏览次数:143 时间:2019-11-27

项目背景:

学php gd库 看见有图表裁剪 正巧整二个 嗯 其实挺简单的
php版

分界面显得为风姿洒脱组零散的图片围绕一张手机显示器图片。

复制代码 代码如下:

客商建议必要为,必要拖动每种零散的图样到手提式有线电话机显示器图片中并能自动张开相应的页面。

<!DOCTYPE html>
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resize</title>
<style type="text/css">
*{ padding:0; margin:0;}
ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px; margin:30px auto; }
li{ float:left; width:500px;}
#container{width:480px; height:480px; margin:0 auto; border:1px solid #999; position:relative;backgroundnull:url(
#container .block{height:100px; width:100px; border:1px solid #000000; position:absolute; left:50px; top:50px; background:#fff;filter:alpha(opacity=30);opacity:0.3; cursor:move;}
.rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;}
.rLeftDown,.rRightUp{cursor:ne-resize;}
.rRightDown,.rLeftUp{cursor:nw-resize;}
.rRight,.rLeft{cursor:e-resize;}
.rUp,.rDown{cursor:n-resize;}
.rRightDown{ bottom:-3px; right:-3px;}
.rLeftDown{ bottom:-3px; left:-3px;}
.rRightUp{ top:-3px; right:-3px;}
.rLeftUp{ top:-3px; left:-3px;}
.rRight{ right:-3px; top:50%}
.rLeft{ left:-3px; top:50%}
.rUp{ top:-3px; left:50%}
.rDown{ bottom:-3px; left:50%}
#imgC{ border:1px solid #CCC; width:0; height:0; margin:0 auto;backgroundnull:url(
</style>
</head>
<body>
<ul>
<li>
<div id="container"></div>
</li>
<li>
<div id="imgC"></div>
</li>
</ul>
<script type="text/javascript" src=";
<script type="text/javascript">
(function(){
var dBody = document.body,
dDoc = document.documentElement;
var clip = function(options){
this.init.call(this,options);
}
clip.prototype = {
options :{
moveCallBack : function(){},
className : "block"
},
init : function(options){
$.extend(this,this.options,options||{});
if(!this.container || !this.imgC){
return;
}
this.container = $(this.container);
var self = this;
this.block = $('<div class="' this.className '">
<div action="rightDown" class="rRightDown"></div>
<div action="leftDown" class="rLeftDown"></div>
<div action="rightUp" class="rRightUp"></div>
<div action="leftUp" class="rLeftUp"></div>
<div action="right" class="rRight"></div>
<div action="left" class="rLeft"></div>
<div action="up" class="rUp"></div>
<div action="down" class="rDown" ></div>
</div>')
.bind("mousedown.r",function(e){self.start(e)})
.appendTo(this.container[0]);
this.setImg();
},
setImg : function(){
var block = this.block;
this.imgC.css({
height: block.height(),
width : block.width(),
"background-position" : "-" block.css("left") " -" block.css("top")
});
},
start : function(e){
var $elem = $(e.target),
block = this.block,
self = this,
move = false,
container = this.container,
action = $elem.attr("action");
//这些 每回都要总括 基本dom结构的改过 浏览器的缩放 都会让内部的值爆发改造
this.offset = $.extend({height:container.height(),width:container.width()},container.offset());
this.blockOriginal = {height:block.height(),width:block.width(),left:parseInt(block.css("left")),top:parseInt(block.css("top"))};
if(action){
this.fun = this[action];
}else{
this.x = e.clientX - this.offset.left - this.blockOriginal.left ;
this.y = e.clientY - this.offset.top - this.blockOriginal.top;
move = true;
}
$(document)
.bind("mousemove.r",function(e){self.move(e,move)})
.bind("mouseup.r",function(){self.end()});
},
end : function(){
$(document)
.unbind("mousemove.r")
.unbind("mouseup.r");
},
move : function(e,isMove){
window.getSelection
? window.getSelection().removeAllRanges()
: document.selection.empty();

 

var block = this.block;
if(isMove){
var left = Math.max(0,e.clientX - this.offset.left - this.x);
left = Math.min(left,this.offset.width - this.blockOriginal.width);
var top = Math.max(0,e.clientY - this.offset.top - this.y);
top = Math.min(top,this.offset.height - this.blockOriginal.height);
block.css({left:left,top:top});
}else{
var offset = this.fun(e);
block.css(offset);
}
this.setImg();
this.moveCallBack();
},
down : function(e){
var blockOriginal = this.blockOriginal,
sTop = Math.max(dBody.scrollTop,dDoc.scrollTop), //现身垂直方向滚动条时候 要计算那几个
offset = this.offset;

听新闻说上边的花色须求则须要扑灭三个难题,即怎样判别钦定的两张图片是不是有重叠。

if(e.clientY-offset.top>=blockOriginal.top-sTop){
var height = Math.min(offset.height - blockOriginal.top,e.clientY-offset.top-blockOriginal.top sTop),
top = blockOriginal.top;
}else{
var height = Math.min(offset.top blockOriginal.top-e.clientY-sTop,blockOriginal.top),
top = Math.max(e.clientY - offset.top sTop,0);
}
return {height:height, top:top};
},
up : function(e){
var blockOriginal = this.blockOriginal,
sTop = Math.max(dBody.scrollTop,dDoc.scrollTop),
offset = this.offset;
if(e.clientY-offset.top-blockOriginal.height<=blockOriginal.top-sTop){
var top = Math.max(e.clientY-offset.top sTop,0),
maxHeight = blockOriginal.top blockOriginal.height,
height = Math.min(maxHeight,blockOriginal.top blockOriginal.height -(e.clientY-offset.top)-sTop);
}else{

基本代码如下:

var height = Math.min(e.clientY-offset.top-blockOriginal.top-blockOriginal.height sTop,offset.height-blockOriginal.top-blockOriginal.height),
top = blockOriginal.top blockOriginal.height;
}
return {height:height, top:top};
},
left : function(e){
var blockOriginal = this.blockOriginal,
offset = this.offset;

                //hotarea为手提式有线电话机显示器图片的id,即目的成分id

if(e.clientX - offset.left - blockOriginal.width - blockOriginal.left<=0){
var left = Math.max(e.clientX - offset.left,0),
width = Math.min(blockOriginal.left blockOriginal.width,blockOriginal.left blockOriginal.width -(e.clientX-offset.left));
}else{
var width = Math.min(e.clientX-offset.left-blockOriginal.left-blockOriginal.width,offset.width-blockOriginal.left-blockOriginal.width),
left = blockOriginal.left blockOriginal.width;
}
return {left : left, width : width};
},
right : function(e){
var blockOriginal = this.blockOriginal,
offset = this.offset;
if(e.clientX-offset.left>=blockOriginal.left){
var width = Math.min(offset.width - blockOriginal.left,e.clientX - offset.left - blockOriginal.left),
left = blockOriginal.left;
}else{
var width = Math.min(offset.left blockOriginal.left - e.clientX,blockOriginal.left),
left = Math.max(e.clientX - offset.left,0);
}
return {left : left, width : width};
},
rightDown : function(e){
return $.extend(this.right(e),this.down(e));
},
leftDown : function(e){
return $.extend(this.left(e),this.down(e));
},
rightUp : function(e){
return $.extend(this.right(e),this.up(e));
},
leftUp : function(e){
return $.extend(this.left(e),this.up(e));
},
getValue : function(){
var block = this.block;
return {
left : parseInt(block.css("left")),
top : parseInt(block.css("top")),
width : block.width(),
height : block.height()
}
}
}
$.fn.clip = function(options){
options.container = this;
return new clip(options);
}
})();
$("#container").clip({
imgC : $("#imgC")
})
</script>
</body>
</html>

               //this为当下拖动的图纸成分

gd库 看见有图片裁剪 恰好整三个 嗯 其实挺轻巧的 php版 复制代码 代码如下: !DOCTYPE html html xmlns="" head meta http-eq...

                var offset_target = $("#hotarea").position();
                var target_width = $("#hotarea").width();
                var target_height = $("#hotarea").height();

                var offset_c = $(this).position();
                var c_width = $(this).width();
                var c_height = $(this).height();

               //推断x坐标是不是有重合,需考虑因素宽度
                var xmerge = judgemerge(offset_target.left, offset_target.left target_width, offset_c.left, offset_c.left c_width);
                //判定y坐标是或不是有重叠,需考虑因素中度

                var ymerge = judgemerge(offset_target.top, offset_target.top target_height, offset_c.top, offset_c.top c_height);

                if (xmerge && ymerge) {

本文由新浦京81707con发布于注册购买,转载请注明出处:判断两个页面元素是否重叠的算法,图片裁剪技

关键词: 新浦京81707con

上一篇:心得体会,阅读笔记

下一篇:没有了