📄 mask.js
字号:
}
else
{
if(y3 >= y1)
{
this.drawPixel(intx, (y1 + 1), this.borderColour, 100, (y3 - y1), newCorner, 0, 0);
}
}
// Set the colour for the outside curve
var outsideColour = this.borderColour;
}
else
{
// Set the coour for the outside curve
var outsideColour = this.boxColour;
var y3 = y1;
}
// Draw aa pixels?
if(this.settings.antiAlias)
{
// Cycle the y-axis and draw the anti aliased pixels on the outside of the curve
for(var inty = (y3 + 1); inty < y4; inty++)
{
// For each of the pixels that need anti aliasing between the foreground/border colour & background draw single pixel divs
this.drawPixel(intx, inty, outsideColour, (pixelFraction(intx, inty , j) * 100), 1, newCorner, ((this.borderWidth > 0)? 0 : -1), this.settings[cc].radius);
}
}
}
// END OF CORNER CREATION
// ---------------------------------------------------- END
// We now need to store the current corner in the masterConers array
this.masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true);
}
/*
Now we have a new corner we need to reposition all the pixels unless
the current corner is the bottom right.
*/
if(cc != "br")
{
// Loop through all children (pixel bars)
for(var t = 0, k = newCorner.childNodes.length; t < k; t++)
{
// Get current pixel bar
var pixelBar = newCorner.childNodes[t];
// Get current top and left properties
var pixelBarTop = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px")));
var pixelBarLeft = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px")));
var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px")));
// Reposition pixels
if(cc == "tl" || cc == "bl"){
pixelBar.style.left = this.settings[cc].radius -pixelBarLeft -1 + "px"; // Left
}
if(cc == "tr" || cc == "tl"){
pixelBar.style.top = this.settings[cc].radius -pixelBarHeight -pixelBarTop + "px"; // Top
}
switch(cc)
{
case "tr":
pixelBar.style.backgroundPosition = "-" + Math.abs((this.boxWidth - this.settings[cc].radius + this.borderWidth) + pixelBarLeft) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px";
break;
case "tl":
pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px";
break;
case "bl":
pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs((this.boxHeight + this.settings[cc].radius + pixelBarTop) -this.borderWidth) + "px";
break;
}
}
}
}
if(newCorner)
{
// Position the container
switch(cc)
{
case "tl":
if(newCorner.style.position == "absolute") newCorner.style.top = "0px";
if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
if(this.topContainer) this.topContainer.appendChild(newCorner);
break;
case "tr":
if(newCorner.style.position == "absolute") newCorner.style.top = "0px";
if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
if(this.topContainer) this.topContainer.appendChild(newCorner);
break;
case "bl":
if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px";
if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
break;
case "br":
if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px";
if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
break;
}
}
}
}
/*
The last thing to do is draw the rest of the filler DIVs.
We only need to create a filler DIVs when two corners have
diffrent radiuses in either the top or bottom container.
*/
// Find out which corner has the biiger radius and get the difference amount
var radiusDiff = new Array();
radiusDiff["t"] = Math.abs(this.settings.tl.radius - this.settings.tr.radius)
radiusDiff["b"] = Math.abs(this.settings.bl.radius - this.settings.br.radius);
for(z in radiusDiff)
{
// FIX for prototype lib
if(z == "t" || z == "b")
{
if(radiusDiff[z])
{
// Get the type of corner that is the smaller one
var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius)? z +"l" : z +"r");
// First we need to create a DIV for the space under the smaller corner
var newFiller = document.createElement("DIV");
newFiller.style.height = radiusDiff[z] + "px";
newFiller.style.width = this.settings[smallerCornerType].radius+ "px"
newFiller.style.position = "absolute";
newFiller.style.fontSize = "1px";
newFiller.style.overflow = "hidden";
newFiller.style.backgroundColor = this.boxColour;
//newFiller.style.backgroundColor = get_random_color();
// Position filler
switch(smallerCornerType)
{
case "tl":
newFiller.style.bottom = "0px";
newFiller.style.left = "0px";
newFiller.style.borderLeft = this.borderString;
this.topContainer.appendChild(newFiller);
break;
case "tr":
newFiller.style.bottom = "0px";
newFiller.style.right = "0px";
newFiller.style.borderRight = this.borderString;
this.topContainer.appendChild(newFiller);
break;
case "bl":
newFiller.style.top = "0px";
newFiller.style.left = "0px";
newFiller.style.borderLeft = this.borderString;
this.bottomContainer.appendChild(newFiller);
break;
case "br":
newFiller.style.top = "0px";
newFiller.style.right = "0px";
newFiller.style.borderRight = this.borderString;
this.bottomContainer.appendChild(newFiller);
break;
}
}
// Create the bar to fill the gap between each corner horizontally
var newFillerBar = document.createElement("DIV");
newFillerBar.style.position = "relative";
newFillerBar.style.fontSize = "1px";
newFillerBar.style.overflow = "hidden";
newFillerBar.style.backgroundColor = this.boxColour;
newFillerBar.style.backgroundImage = this.backgroundImage;
switch(z)
{
case "t":
// Top Bar
if(this.topContainer)
{
// Edit by Asger Hallas: Check if settings.xx.radius is not false
if(this.settings.tl.radius && this.settings.tr.radius)
{
newFillerBar.style.height = topMaxRadius - this.borderWidth + "px";
newFillerBar.style.marginLeft = this.settings.tl.radius - this.borderWidth + "px";
newFillerBar.style.marginRight = this.settings.tr.radius - this.borderWidth + "px";
newFillerBar.style.borderTop = this.borderString;
if(this.backgroundImage != "")
newFillerBar.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px";
this.topContainer.appendChild(newFillerBar);
}
// Repos the boxes background image
this.box.style.backgroundPosition = "0px -" + (topMaxRadius - this.borderWidth) + "px";
}
break;
case "b":
if(this.bottomContainer)
{
// Edit by Asger Hallas: Check if settings.xx.radius is not false
if(this.settings.bl.radius && this.settings.br.radius)
{
// Bottom Bar
newFillerBar.style.height = botMaxRadius - this.borderWidth + "px";
newFillerBar.style.marginLeft = this.settings.bl.radius - this.borderWidth + "px";
newFillerBar.style.marginRight = this.settings.br.radius - this.borderWidth + "px";
newFillerBar.style.borderBottom = this.borderString;
if(this.backgroundImage != "")
newFillerBar.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (topMaxRadius + this.borderWidth)) + "px";
this.bottomContainer.appendChild(newFillerBar);
}
}
break;
}
}
}
/*
AutoPad! apply padding if set.
*/
if(this.settings.autoPad == true && this.boxPadding > 0)
{
// Create content container
var contentContainer = document.createElement("DIV");
// Set contentContainer's properties
contentContainer.style.position = "relative";
contentContainer.innerHTML = this.boxContent;
contentContainer.className = "autoPadDiv";
// Get padding amounts
var topPadding = Math.abs(topMaxRadius - this.boxPadding);
var botPadding = Math.abs(botMaxRadius - this.boxPadding);
// Apply top padding
if(topMaxRadius < this.boxPadding)
contentContainer.style.paddingTop = topPadding + "px";
// Apply Bottom padding
if(botMaxRadius < this.boxPadding)
contentContainer.style.paddingBottom = botMaxRadius + "px";
// Apply left and right padding
contentContainer.style.paddingLeft = this.boxPadding + "px";
contentContainer.style.paddingRight = this.boxPadding + "px";
// Append contentContainer
this.contentDIV = this.box.appendChild(contentContainer);
}
}
/*
This function draws the pixles
*/
this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius)
{
// Create pixel
var pixel = document.createElement("DIV");
pixel.style.height = height + "px";
pixel.style.width = "1px";
pixel.style.position = "absolute";
pixel.style.fontSize = "1px";
pixel.style.overflow = "hidden";
// Max Top Radius
var topMaxRadius = Math.max(this.settings["tr"].radius, this.settings["tl"].radius);
// Dont apply background image to border pixels
if(image == -1 && this.backgroundImage != "")
{
pixel.style.backgroundImage = this.backgroundImage;
pixel.style.backgroundPosition = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + topMaxRadius + inty) -this.borderWidth) + "px";
}
else
{
pixel.style.backgroundColor = colour;
}
// Set opacity if the transparency is anything other than 100
if (transAmount != 100)
setOpacity(pixel, transAmount);
// Set the pixels position
pixel.style.top = inty + "px";
pixel.style.left = intx + "px";
newCorner.appendChild(pixel);
}
}
// ------------- UTILITY FUNCTIONS
// Inserts a element after another
function insertAfter(parent, node, referenceNode)
{
parent.insertBefore(node, referenceNode.nextSibling);
}
/*
Blends the two colours by the fraction
returns the resulting colour as a string in the format "#FFFFFF"
*/
function BlendColour(Col1, Col2, Col1Fraction)
{
var red1 = parseInt(Col1.substr(1,2),16);
var green1 = parseInt(Col1.substr(3,2),16);
var blue1 = parseInt(Col1.substr(5,2),16);
var red2 = parseInt(Col2.substr(1,2),16);
var green2 = parseInt(Col2.substr(3,2),16);
var blue2 = parseInt(Col2.substr(5,2),16);
if(Col1Fraction > 1 || Col1Fraction < 0) Col1Fraction = 1;
var endRed = Math.round((red1 * Col1Fraction) + (red2 * (1 - Col1Fraction)));
if(endRed > 255) endRed = 255;
if(endRed < 0) endRed = 0;
var endGreen = Math.round((green1 * Col1Fraction) + (green2 * (1 - Col1Fraction)));
if(endGreen > 255) endGreen = 255;
if(endGreen < 0) endGreen = 0;
var endBlue = Math.round((blue1 * Col1Fraction) + (blue2 * (1 - Col1Fraction)));
if(endBlue > 255) endBlue = 255;
if(endBlue < 0) endBlue = 0;
return "#" + IntToHex(endRed)+ IntToHex(endGreen)+ IntToHex(endBlue);
}
/*
Converts a number to hexadecimal format
*/
function IntToHex(strNum)
{
base = strNum / 16;
rem = strNum % 16;
base = base - (rem / 16);
baseS = MakeHex(base);
remS = MakeHex(rem);
return baseS + '' + remS;
}
/*
gets the hex bits of a number
*/
function MakeHex(x)
{
if((x >= 0) && (x <= 9))
{
return x;
}
else
{
switch(x)
{
case 10: return "A";
case 11: return "B";
case 12: return "C";
case 13: return "D";
case 14: return "E";
case 15: return "F";
}
}
}
/*
For a pixel cut by the line determines the fraction of the pixel on the 'inside' of the
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -