康康马 | 个性礼品在线定制网站的实现（三）-- 图片的缩放

个性礼品在线定制网站的实现（三）-- 图片的缩放

kangkangma | 13 九月, 2007 23:42

本文主要介绍如何通过javascript实现图片的缩放效果。仍然使用yahoo的开源类库yui(The Yahoo! User Interface Library)来实现这个功能。面对yui强大的功能，我只能说I love Yahoo.

思路：创建一个可改变大小的层(div)，将图片放入该层，改变层的大小的同时也改变图片的大小。该层继承YAHOO.util.DragDrop，这样同时能实现图片拖动的效果。

查看效果 (拖动蓝色区域可以改变图片的大小，拖动其它区域可以移动图片)

HTML代码：

JS代码：

YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) {
    YAHOO.example.DDResize.superclass.constructor.apply(this, arguments);
    if (handleElId) {
        this.setHandleElId(handleElId);
    }
};

YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop, {

    onMouseDown: function(e) {
        var panel = this.getEl();
        this.startWidth = panel.offsetWidth;
        this.startHeight = panel.offsetHeight;

        this.startPos = [YAHOO.util.Event.getPageX(e),
                         YAHOO.util.Event.getPageY(e)];
    },

    onDrag: function(e) {
        var newPos = [YAHOO.util.Event.getPageX(e),
                      YAHOO.util.Event.getPageY(e)];

        var offsetX = newPos[0] - this.startPos[0];
        var offsetY = newPos[1] - this.startPos[1];

        var newWidth = Math.max(this.startWidth + offsetX, 10);
        var newHeight = Math.max(this.startHeight + offsetY, 10);

        var panel = this.getEl();
        panel.style.width = newWidth + "px";
        panel.style.height = newHeight + "px";
        document.getElementById('editpic').width = newWidth;
        document.getElementById('editpic').height = newHeight;
    }


});

dd1 = new YAHOO.example.DDResize("dd-panel", "dd-resize-handle", "panelresize");
dd2 = new YAHOO.util.DD("dd-panel", "paneldrag"); dd2.addInvalidHandleId("dd-resize-handle");

代码分析：

创建一个YAHOO.example.DDResize类，它继承了YAHOO.util.DragDrop。

当鼠标按下时（onMouseDown）记录div的初始width和height，并记录鼠标的当前X和Y坐标。

当鼠标拖动时（onDrag），将鼠标的XY坐标减去onMouseDown时的鼠标XY坐标，然后与div的初始width和height 相加，得到新的width和height。Math.max(this.startWidth + offsetX, 10)则设置了div最小的width和height为10。同时将图片的width和height设成div新的width和height。

dd1 = new YAHOO.example.DDResize("dd-panel", "dd-resize-handle", "panelresize");表示只有对id为dd-resize-handle的div进行操作时，才会触发DDResize的onMouseDown和onDrag等事件。

dd2.addInvalidHandleId("dd-resize-handle");这句程序设置了对id为dd-resize-handle的div进行操作时不会触发YAHOO.util.DD的鼠标事件，以免改变层的大小和层的拖动发生冲突。

查看效果 (拖动蓝色区域可以改变图片的大小，拖动其它区域可以移动图片)