📄 rectmarquee.js
字号:
this.startOffset[0] - this.startDimension.width;
if (ratio) {
newDimension.height = newDimension.width / ratio;
};
} else if (this.startOffset[0] + shifting[0] < 0 && newDimension.width > 0) {
newDimension.width = this.startOffset[0] + this.startDimension.width - 2;
if (ratio) {
newDimension.height = newDimension.width / ratio;
};
} else if (this.startOffset[0] + shifting[0] < 0 && newDimension.width < 0) {
newDimension.width = this.startOffset[0];
if (ratio) {
newDimension.height = newDimension.width / ratio;
};
}
if (this.startOffset[1] + shifting[1] +
newDimension.height > element.offsetHeight) {
newDimension.height = element.offsetHeight -
this.startOffset[1];
if (ratio) {
newDimension.width = newDimension.height * ratio;
};
} else if (this.startOffset[1] + shifting[1] -
newDimension.height > element.offsetHeight) {
newDimension.height = element.offsetHeight -
this.startOffset[1] - this.startDimension.height;
if (ratio) {
newDimension.width = newDimension.height * ratio;
};
} else if (this.startOffset[1] + shifting[1] < 0 && newDimension.height > 0) {
newDimension.height = this.startOffset[1] + this.startDimension.height - 2;
if (ratio) {
newDimension.width = newDimension.height * ratio;
};
} else if (this.startOffset[1] + shifting[1] < 0 && newDimension.height < 0) {
newDimension.height = this.startOffset[1];
if (ratio) {
newDimension.width = newDimension.height * ratio;
};
};
};
this.setCoords(
this.startOffset[0] + shifting[0],
this.startOffset[1] + shifting[1],
newDimension.width,
newDimension.height
);
if (event.shiftKey) {
this.ratio = 0;
};
Event.stop(event);
if (typeof options.onUpdate == 'function')
options.onUpdate();
},
setOpacity: function(value) {
var item = this.items[this.activeId];
Element.setOpacity(item.wind, value);
Element.setOpacity(item.marquee.o1, value);
Element.setOpacity(item.marquee.o2, value);
Element.setOpacity(item.marquee.o3, value);
Element.setOpacity(item.marquee.o4, value);
this.setOption(item.id, 'opacity', value);
},
setColor: function(color) {
var item = this.items[this.activeId];
color = color || item.color;
this.items[this.activeId].color = color;
if (item.type == 'crop' || item.type == 'window') {
Element.setStyle(item.marquee.o1, {backgroundColor: color});
Element.setStyle(item.marquee.o2, {backgroundColor: color});
Element.setStyle(item.marquee.o3, {backgroundColor: color});
Element.setStyle(item.marquee.o4, {backgroundColor: color});
Element.setStyle(item.wind, {backgroundColor: ''});
} else if (item.type == 'rect' || item.type == 'marquee') {
Element.setStyle(item.wind, {backgroundColor: color});
Element.setStyle(item.marquee.o1, {backgroundColor: ''});
Element.setStyle(item.marquee.o2, {backgroundColor: ''});
Element.setStyle(item.marquee.o3, {backgroundColor: ''});
Element.setStyle(item.marquee.o4, {backgroundColor: ''});
} else {
Element.setStyle(item.wind, {backgroundColor: ''});
Element.setStyle(item.marquee.o1, {backgroundColor: ''});
Element.setStyle(item.marquee.o2, {backgroundColor: ''});
Element.setStyle(item.marquee.o3, {backgroundColor: ''});
Element.setStyle(item.marquee.o4, {backgroundColor: ''});
};
},
keyPress: function(event) {
var key = event.keyCode || event.which || event.button;
switch (key) {
case 27:
// escape
this.unselectAll();
break;
case 37:
// left arrow
this.moveLeft(event.shiftKey ? 10 : 1, event.ctrlKey);
break;
case 38:
// top arrow
if (event.altKey) {
var opacity = this.getOption(this.activeId, 'opacity');
this.setOpacity(opacity < 0.95 ? opacity + 0.05 : 1);
} else {
this.moveTop(event.shiftKey ? 10 : 1, event.ctrlKey);
};
break;
case 39:
// right arrow
this.moveRight(event.shiftKey ? 10 : 1, event.ctrlKey);
break;
case 40:
// down arrow
if (event.altKey) {
var opacity = this.getOption(this.activeId, 'opacity');
this.setOpacity(opacity > 0.05 ? opacity - 0.05 : 0);
} else {
this.moveBottom(event.shiftKey ? 10 : 1, event.ctrlKey);
};
break;
case 65:
// a - select all
this.selectAll();
break;
case 69:
// e - edges switching
this.switchEdges();
break;
case 73:
// i - inverse opacity type (selection)
this.inverse();
break;
case 78:
// n - new
if (event.shiftKey)
this.add(this.getElement(), this.items[this.activeId].options);
break;
case 90:
// z - zoom
this.zoom(event.shiftKey ? 10 : 1, event.ctrlKey);
break;
case 82:
// r - random color
this.setRandomColor();
break;
case 83:
// s - select next
this.select();
break;
case 49: case 50: case 51:
case 52: case 53: case 54:
case 55: case 56: case 57: case 48:
// numbers
if (event.shiftKey) {
var colors = ['00f', '000', 'ffc', 'cfc', '0f0', '0ff', 'f00', 'f0f', 'ff0', 'fff'];
this.setColor('#' + colors[key - 48]);
};
break;
}
},
setType: function(type) {
this.items[this.activeId].type = type;
this.setColor();
},
getType: function(id) {
return this.items[id || this.activeId].type;
},
snap: function(x, y, k) {
var ratio = this.getRatio();
return ratio ? [y * ratio * k, y] : [x, y];
},
getWindow: function(id) {
return this.items[id || this.activeId].wind;
},
getMarquee: function(id) {
return this.items[id || this.activeId].marquee;
},
getElement: function(id) {
return this.items[id || this.activeId].element;
},
getCoords: function(id) {
return this.items[id || this.activeId].coords;
},
moveRight: function(amount, ctrlKey) {
var coords = this.getCoords();
this.setCoords(
ctrlKey ? coords.x1 : coords.x1 + amount, coords.y1,
ctrlKey ? coords.width + amount : coords.width, coords.height
);
},
moveLeft: function(amount, ctrlKey) {
var coords = this.getCoords();
this.setCoords(
ctrlKey ? coords.x1 : coords.x1 - amount, coords.y1,
ctrlKey ? coords.width - amount : coords.width, coords.height
);
},
moveTop: function(amount, ctrlKey) {
var coords = this.getCoords();
this.setCoords(
coords.x1, ctrlKey ? coords.y1 : coords.y1 - amount,
coords.width, ctrlKey ? coords.height - amount : coords.height
);
},
moveBottom: function(amount, ctrlKey) {
var coords = this.getCoords();
this.setCoords(
coords.x1, ctrlKey ? coords.y1 : coords.y1 + amount,
coords.width, ctrlKey ? coords.height + amount : coords.height
);
},
zoom: function(amount, ctrlKey) {
var coords = this.getCoords();
var k = ctrlKey ? 1 : -1;
this.setCoords(
coords.x1 + k * amount, coords.y1 + k * amount,
coords.width - 2*k * amount, coords.height - 2*k * amount
);
},
inverse: function() {
var curr = this.getType();
this.setType(curr == 'window' || curr == 'crop' ? 'rect' : 'crop');
},
unselectAll: function() {
this.setCoords(0,0,0,0);
this.hideEdges();
},
selectAll: function() {
var element = this.getElement();
this.setCoords(0,0,element.offsetWidth,element.offsetHeight);
this.showEdges();
},
switchEdges: function() {
var id = this.activeId;
var edges = this.getOption(id, 'hideEdges');
this.setOption(id, 'hideEdges', !edges);
if (edges)
this.showEdges();
else
this.hideEdges();
},
showEdges: function(id) {
if (!this.getOption(id, 'allowResize') || this.getOption(id, 'hideEdges')) return;
var marquee = this.getMarquee(id);
$A(marquee.childNodes).each(function(item){
if (item.className && item.className == 'marquee-edge') {
Element.setStyle(item, {display: ''});
};
});
},
hideEdges: function(id) {
var marquee = this.getMarquee(id);
$A(marquee.childNodes).each(function(item){
if (item.className && item.className == 'marquee-edge') {
Element.setStyle(item, {display: 'none'});
};
});
},
select: function(id) {
var currentObj = this.items[this.activeId];
if (this.items[id]) {
this.activeId = id;
} else {
var ids = [], max = 0, current = 0;
$A(this.items).each((function(item){
if (item.id > max) max = item.id;
if (this.activeId == item.id) current = ids.length;
ids.push(item.id);
}).bind(this));
if (ids.length > 1) {
this.activeId = (max == this.activeId) ? ids[0] : ids[current+1];
};
};
if (this.activeId !== id && this.items.length > 1) {
var newObj = this.items[this.activeId];
var maxz = currentObj.zIndex;
this.items[currentObj.id].zIndex = newObj.zIndex;
Element.setStyle(this.items[currentObj.id].marquee.parentNode, {zIndex: newObj.zIndex});
var marquee = this.getMarquee();
var wind = this.getWindow();
this.items[this.activeId].zIndex = maxz;
Element.setStyle(marquee.parentNode, {zIndex: maxz});
Element.setStyle(wind, {border: '2px solid black'});
setTimeout(function(){Element.setStyle(wind, {border: ''});}, 250);
};
},
hide: function(id) {
var marquee = this.getMarquee(id);
Element.hide(marquee.parentNode);
this.setOption(id, 'hidden', true);
},
show: function(id) {
var marquee = this.getMarquee(id);
Element.show(marquee.parentNode);
this.setOption(id, 'hidden', false);
},
setOption: function(id, option, value) {
this.items[id || this.activeId].options[option] = value;
},
getOption: function(id, option) {
return this.items[id || this.activeId].options[option];
},
render: function(event) {
if (this.activeId == undefined) return;
var element = this.getElement();
var marquee = this.getMarquee();
var pos = Position.positionedOffset(element);
Element.setStyle(marquee.parentNode, {
width: element.offsetWidth + 'px',
height: element.offsetHeight + 'px',
left: pos[0] + 'px',
top: pos[1] + 'px'
});
},
snapRatio: function(w, h) {
var ratio;
if (ratio = this.getRatio()) {
if (w < h) {
h = Math.floor(w / ratio);
} else {
w = Math.floor(h * ratio);
};
};
return [w, h];
},
setCoords: function(x, y, w, h) {
w = Math.abs(w);
h = Math.abs(h);
if (x < 0) x = 0;
if (y < 0) y = 0;
var element = this.getElement();
if (w > element.offsetWidth) w = element.offsetWidth;
if (h > element.offsetHeight) h = element.offsetHeight;
if (x+w > element.offsetWidth)
x = element.offsetWidth-w;
if (y+h > element.offsetHeight)
y = element.offsetHeight-h;
var snap = this.snapRatio(w, h);
w = snap[0]; h = snap[1];
this.items[this.activeId].coords = {
x1: x, y1: y,
x2: x + w, y2: y + h,
width: w, height: h
};
var marquee = this.getMarquee(this.activeId);
Element.setStyle(marquee, {
width: w + 'px',
height: h + 'px',
left: x + 'px',
top: y + 'px',
display: 'block'
});
Element.setStyle(this.getWindow(this.activeId), {
height: h + 'px'
});
Element.setStyle(marquee.o1, {height: y + 1 + 'px'});
Element.setStyle(marquee.o2, {height: h + 'px', width: x + 'px', top: y + 1 + 'px'});
Element.setStyle(marquee.o3, {
height: h + 'px',
width: ((tmp = element.offsetWidth - x - w - 1) > 0 ? tmp : 0) + 'px',
top: y + 1 + 'px'
});
Element.setStyle(marquee.o4, {
top: h + y + 1 + 'px',
height: ((tmp = element.offsetHeight - y - h - 1) > 0 ? tmp : 0) + 'px'
});
// preview
if (this.items[this.activeId].options.preview) {
var pw = this.items[this.activeId].options.previewWidth;
var ph = this.items[this.activeId].options.previewHeight;
var r = Math.min(w ? pw/w : 0, h ? ph/h : 0);
if (r > 1) r = 1;
Element.setStyle(this.items[this.activeId].preview, {
width: w * r + 'px',
height: h * r + 'px'
});
Element.setStyle(this.items[this.activeId].pImage, {
width: this.items[this.activeId].element.offsetWidth * r + 'px',
height: this.items[this.activeId].element.offsetHeight * r + 'px',
left: -x * r + 'px',
top: -y * r + 'px'
});
};
},
finishDrag: function() {
if (!this.dragging) return;
this.dragging = false;
this.setRatio(this.getRatio());
},
setOnUpdateCallback: function(callback) {
if (this.activeId == undefined) return;
this.setOption(this.activeId, 'onUpdate', callback);
},
setOnBeforeUpdateCallback: function(callback) {
if (this.activeId == undefined) return;
this.setOption(this.activeId, 'onBeforeUpdate', callback);
}
};
if (!Element.setOpacity) {
Element.setOpacity = function(element, value) {
element= $(element);
if (value == 1) {
Element.setStyle(element, {
opacity: (/Gecko/.test(navigator.userAgent) &&
!/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 0.999999 : null
});
if(/MSIE/.test(navigator.userAgent))
Element.setStyle(element, {
filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')
});
} else {
if(value < 0.00001) value = 0;
Element.setStyle(element, {opacity: value});
if(/MSIE/.test(navigator.userAgent))
Element.setStyle(element, {
filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') + 'alpha(opacity='+value*100+')'
});
};
};
};
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -