关于切割图像

程序说明图片切割那部分那里有说明了啊就是利用clip
clip的作用是“检索或设置对象的可视区域。可视区域外的部分是透明的。”
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。
例如：div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }
注意position:absolute的设置是必须的（详细看手册）。下面说说具体实现原理：
首先需要一个容器，拖放对象，图片地址，显示宽度和高度，
还要插入三个层：
底图层：那个半透明的图片，
显示层：拖放对象中正常显示的那个部分，
拖动层：就是拖放对象，
其中为了底图层和显示层能完美的重叠，我两个层都用了绝对定位，定在左上角。

解决方案 »

  1.   

    底图层是
    this._pic = this.Container.appendChild(document.createElement("img"));//图片对象
    appendChild就是插入容器了这部分设置的半透明
        if(isIE){
            this._pic.style.filter = "alpha(opacity:" + this.Opacity + ")";
        } else {
            this._pic.style.opacity = this.Opacity / 100;
        }
      

  2.   

    显示层根据拖动层的参数
    用clip来“设置对象的可视区域”
      

  3.   

    cloudgamer 兄  我现在就是让拖动层透明我弄不好将拖拽层填充透明层
    this._odiv = document.createElement("div");
    this.oDrag.style.overflow = "hidden";
    (function(style){
    style.width = style.height = "100%"; style.position = "absolute";style.backgroundColor = "#FFFFFF";style.zIndex = 300;
    })(this._odiv.style) this.oDrag.appendChild(this._odiv)
      

  4.   

    显示层和拖动层是两个层啊
    不是同一个div来的啊拖动层仅仅是那个拖动的div跟图片无关的关键是显示层
    显示层是显示的图片，本来是透明的，要根据拖动层的数据来设置clip来“设置对象的可视区域”
      

  5.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <style>
      #oContent{
    border: 3px solid #000033;
    height: 600px;
    width: 402px;
    position:relative;
      }
      #oDiv{
    width: 100px;
    color: #C0C0C0;
    border: 1 solid #000000;
    height: 100px;
    font-size:9pt;
    text-align:center;
    z-index: 100;
    position: absolute;  }
      </style>
      <script language="JavaScript">
      <!--
    var $ = function(id){
    return 'string' == typeof id ? document.getElementById(id) : id;
    } function addEventHandler(oTarget, sEventType, fnHandler){
    if(oTarget.addEventListener){
    oTarget.addEventListener(sEventType, fnHandler, false);
    }else if(oTarget.attachEvent){
    oTarget.attachEvent("on" + sEventType, fnHandler);
    }else{
    oTarget["on" + sEventType] = fnHandler;
    }
    } function removeEventHandler(oTarget, sEventType, fnHandler){
    if(oTarget.removeEventListener){
    oTarget.removeEventListener(sEventType, fnHandler, false);
    }else if(oTarget.detachEvent){
    oTarget.detachEvent("on" + sEventType, fnHandler);
    }else{
    oTarget["on" + sEventType] = null;
    }
    } var isIE = (document.all) ? true : false; var Class = {
    create : function(){
    return function(){
    this.initialize.apply(this, arguments);
    }
    }
    } Object.extend = function(distination, source){
    for(var property in source){
    distination[property] = source[property];
    }
    return distination;
    } var Drag = Class.create();
    Drag.prototype = {
    initialize : function(idContent, idDrag, options){
    var oThis = this;
    this._fM = function(e){oThis.mouseMove(e || window.event)};
    this._fU = function(e){oThis.mouseUp(e || window.event)};
    this._x = 0;this.y = 0;
    this.oDrag = $(idDrag);this.oContent = $(idContent);
    this.setOptions(options);
    addEventHandler(this.oDrag, "mousedown", function(e){oThis.mouseDown(e || window.event)})
    }, setOptions : function(options){
    this.options = {
    Limit : true //true: 限制范围 ，false: 不限制范围
    };
    Object.extend(this.options, options || {});
    }, mouseDown : function(oEvent){
    this._x = oEvent.clientX - this.oDrag.offsetLeft;
    this._y = oEvent.clientY - this.oDrag.offsetTop;
    if(isIE){
    addEventHandler(this.oDrag, "losecapture", this._fU);
    this.oDrag.setCapture();
    }else{
    window.getSelection && window.getSelection().removeAllRanges();
    }
    addEventHandler(document, "mousemove",this._fM);
    addEventHandler(document, "mouseup",this._fU);
    }, mouseMove : function(oEvent){
    var iLeft = oEvent.clientX - this._x;
    var iTop = oEvent.clientY - this._y;
    // 限制范围时候的坐标判断
    if(this.options.Limit){
    var iMaxLeft = iMaxTop = 0;
    var iMaxRight = this.oContent.clientWidth;
    var iMaxBottom = this.oContent.clientHeight;
    var bLock = false; // 获取超出长度
    var iRight = this.oDrag.offsetWidth + iLeft - iMaxRight;
    var iBottom = this.oDrag.offsetHeight + iTop - iMaxBottom; if(iRight > 0){iLeft -= iRight;}
    if(iBottom > 0){iTop -= iBottom;}
    if(iMaxLeft > iLeft) {iLeft = iMaxLeft;}
    if(iMaxTop > iTop){iTop = iMaxTop;}
    }
    this.oDrag.style.left = iLeft;
    this.oDrag.style.top = iTop; }, mouseUp : function(oEvent){
    if(isIE){
    removeEventHandler(this.oDrag, "losecapture", this._fU);
    this.oDrag.releaseCapture();
    }
    removeEventHandler(document, "mousemove",this._fM );
    removeEventHandler(document, "mouseup",this._fU );
    }
    }
    var ImageClip = Class.create(); ImageClip.prototype = {
    initialize : function(oContent, oDrag, sUrl){
    var oThis = this;
    this.oContent = $(oContent);this.oDrag = $(oDrag);
    this.oContent.style.overflow = "hidden";
    this.sUrl = sUrl; // 1.添加背景图片并设置为半透明
    this._ipc  = document.createElement("img");
    (function(obj){
    obj.src = oThis.sUrl;obj.style.width = obj.style.height = "100%";
    obj.style.zIndex = 200;obj.style.position = "absolute";obj.style.filter = "alpha(opacity:50)";
    })(this._ipc)

    this.oContent.appendChild(this._ipc); // 2.将拖拽层填充透明层
    this.oDrag.style.overflow = "hidden";
    this._odiv = document.createElement("div");
    (function(style){
    style.width = style.height = "100%"; style.backgroundColor = "#FFFFFF";style.zIndex = 300;
    style.filter = "alpha(opacity:0)";
    })(this._odiv.style) this.oDrag.appendChild(this._odiv)
    // 3. 设置层次
    this.oContent.style.zIndex = 0;
    this._ipc.style.zIndex = 100;
    this.oDrag.style.zIndex = 200;
    }
    }

      //-->
      </script>
     </head> <body>
     <div id="oContent">
     <div id="oDiv"></div>
     </div>
     <script>
      new Drag("oContent","oDiv",{limit : true});
      new ImageClip("oContent", "oDiv", "http://ent.gz163.cn/images_ent/2008/7/30/20087303CB81946E3BC4296AB22A5B84FCDA8EB.jpg");
     </script>
     </body>
    </html>现在是这样的效果 
      

  6.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <style>
      #oContent{
        border: 3px solid #000033;
        height: 600px;
        width: 402px;
        position:relative;
      }
      #oDiv{
        width: 100px;
        color: #C0C0C0;
        border: 1 solid #000000;
        height: 100px;
        font-size:9pt;
        text-align:center;
        z-index: 100;
        position: absolute;  }
      </style>
      <script language="JavaScript">
      <!--
        var $ = function(id){
            return 'string' == typeof id ? document.getElementById(id) : id;
        }    function addEventHandler(oTarget, sEventType, fnHandler){
            if(oTarget.addEventListener){
                oTarget.addEventListener(sEventType, fnHandler, false);
            }else if(oTarget.attachEvent){
                oTarget.attachEvent("on" + sEventType, fnHandler);
            }else{
                oTarget["on" + sEventType] = fnHandler;
            }
        }    function removeEventHandler(oTarget, sEventType, fnHandler){
            if(oTarget.removeEventListener){
                oTarget.removeEventListener(sEventType, fnHandler, false);
            }else if(oTarget.detachEvent){
                oTarget.detachEvent("on" + sEventType, fnHandler);
            }else{
                oTarget["on" + sEventType] = null;
            }
        }    var isIE = (document.all) ? true : false;    var Class = {
            create : function(){
                return function(){
                    this.initialize.apply(this, arguments);
                }
            }
        }    Object.extend = function(distination, source){
            for(var property in source){
                distination[property] = source[property];
            }
            return distination;
        }    var Drag = Class.create();
        Drag.prototype = {
            initialize : function(idContent, idDrag, options){
                var oThis = this;
                this._fM = function(e){oThis.mouseMove(e || window.event)};
                this._fU = function(e){oThis.mouseUp(e || window.event)};
                this._x = 0;this.y = 0;
                this.oDrag = $(idDrag);this.oContent = $(idContent);
                this.setOptions(options);
                addEventHandler(this.oDrag, "mousedown", function(e){oThis.mouseDown(e || window.event)})

    this.onMove = function(){}
            },        setOptions : function(options){
                this.options = {
                    Limit : true //true: 限制范围 ，false: 不限制范围
                };
                Object.extend(this.options, options || {});
            },        mouseDown : function(oEvent){
                this._x = oEvent.clientX - this.oDrag.offsetLeft;
                this._y = oEvent.clientY - this.oDrag.offsetTop;
                if(isIE){
                    addEventHandler(this.oDrag, "losecapture", this._fU);
                    this.oDrag.setCapture();
                }else{
                    window.getSelection && window.getSelection().removeAllRanges();
                }
                addEventHandler(document, "mousemove",this._fM);
                addEventHandler(document, "mouseup",this._fU);


            },        mouseMove : function(oEvent){
                var iLeft = oEvent.clientX - this._x;
                var iTop = oEvent.clientY - this._y;
                // 限制范围时候的坐标判断
                if(this.options.Limit){
                    var iMaxLeft = iMaxTop = 0;
                    var iMaxRight = this.oContent.clientWidth;
                    var iMaxBottom = this.oContent.clientHeight;
                    var bLock = false;                // 获取超出长度
                    var iRight = this.oDrag.offsetWidth + iLeft - iMaxRight;
                    var iBottom = this.oDrag.offsetHeight + iTop - iMaxBottom;                if(iRight > 0){iLeft -= iRight;}
                    if(iBottom > 0){iTop -= iBottom;}
                    if(iMaxLeft > iLeft) {iLeft = iMaxLeft;}
                    if(iMaxTop > iTop){iTop = iMaxTop;}    
                }
                    this.oDrag.style.left = iLeft;
                    this.oDrag.style.top = iTop;

    this.onMove();        },        mouseUp : function(oEvent){
                if(isIE){
                    removeEventHandler(this.oDrag, "losecapture", this._fU);
                    this.oDrag.releaseCapture();
                }
                removeEventHandler(document, "mousemove",this._fM );
                removeEventHandler(document, "mouseup",this._fU );
            }
        }
        var ImageClip = Class.create();    ImageClip.prototype = {
            initialize : function(oContent, oDrag, sUrl){
                var oThis = this;
                this.oContent = $(oContent);this.oDrag = $(oDrag);
                this.oContent.style.overflow = "hidden";
                this.sUrl = sUrl;            // 1.添加背景图片并设置为半透明
                this._ipc  = document.createElement("img");
                (function(obj){
                    obj.src = oThis.sUrl;obj.style.width = obj.style.height = "100%";
                    obj.style.zIndex = 200;obj.style.position = "absolute";obj.style.filter = "alpha(opacity:50)";    
                })(this._ipc)
                
                this.oContent.appendChild(this._ipc);

                // 2.将拖拽层填充透明层
                this.oDrag.style.overflow = "hidden";
                this._odiv = document.createElement("div");
                (function(style){
                    style.width = style.height = "100%"; style.backgroundColor = "#FFFFFF";style.zIndex = 300;
                    style.filter = "alpha(opacity:0)";
                })(this._odiv.style)//显示层
                this._showpic  = document.createElement("img");
                (function(obj){
                    obj.src = oThis.sUrl;obj.style.width = obj.style.height = "100%";
                    obj.style.zIndex = 150;obj.style.position = "absolute";  
                })(this._showpic)
    this.oContent.appendChild(this._showpic);

    var od = new Drag("oContent","oDiv",{limit : true});
    od.onMove = function(){
    var o = oThis.oDrag;
    //按拖放对象的参数进行切割
    oThis._showpic.style.clip = "rect(" + o.offsetTop + "px " + (o.offsetLeft + o.offsetWidth) + "px " + (o.offsetTop + o.offsetHeight) + "px " + o.offsetLeft + "px)";
    }
    od.onMove();

    //设置overflow解决ie6的渲染问题(缩放时填充对象高度的问题)
    this.oDrag.style.overflow = "hidden";
    //ie下用一个透明的层填充拖放对象 不填充的话onmousedown会失效(未知原因)
    (function(style){
    style.width = style.height = "100%"; style.backgroundColor = "#fff"; style.filter = "alpha(opacity:0)";
    })(this.oDrag.appendChild(document.createElement("div")).style)
                // 3. 设置层次
                this.oContent.style.zIndex = 0;
                this._ipc.style.zIndex = 100;
                this.oDrag.style.zIndex = 200;
            }
        }
        
      //-->
      </script>
     </head> <body>
     <div id="oContent">
     <div id="oDiv"></div>
     </div>
     <script>  new ImageClip("oContent", "oDiv", "http://ent.gz163.cn/images_ent/2008/7/30/20087303CB81946E3BC4296AB22A5B84FCDA8EB.jpg");
     </script>
     </body>
    </html>
    帮你改好了
      

  7.   

    我没太看明白  你能稍微给我讲下你新加的showpic的作用么？效果是看到  但我没太理解
      

  8.   

    showpic  就是中间正常显示的图片