ребят кто хочет граффити????
вот:

#graffiti_css {
display: none;
}

#graffiti_wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background:#F7F7F7;
z-index: 500;
}

#graffiti_wrapper.graffiti_fullscreen {
position: fixed;
}

#graffiti_height {
height: 435px;
}

#graffiti_topbar {
display: block;
height: 17px;
margin-left: auto;
margin-right: auto;
background-color:#fff;
text-align:left;
overflow: hidden;
padding: 15px 20px 0px 20px;
z-index: 10003;
border-bottom: 1px solid#DEDFE1;
}


#graffiti_gwrap {
display: block;
margin: 0;
padding: 0;
background-color:#f7f7f7;
padding-top: 18px;
padding-bottom: 5px;
z-index: 10003;
}

.graffiti_fullscreen#graffiti_gwrap {
position: absolute;
top: 50%;
}

#graffiti_aligner {
display: block;
padding: 0;
margin: 0 auto;
overflow: hidden;
width: 586px;
height: 293px;
border: 1px solid#CCC;
background-color:#fff;
z-index: 10003;
}

.graffiti_fullscreen#graffiti_aligner {
/*margin-top: -315px;*/
}

#graffiti_overlay {
position: relative;
top: -293px;
z-index: 10012;
display: block;
}

#graffiti_common {
display: block;
z-index: 10010;
}

#graffiti_helper {
display: block;
position: relative;
top: -586px;
z-index: 10011;
}

#graffiti_bottombar {
border-top: 1px solid#DEDFE1;
display: block;
width: 100%;
height: 68px;
margin: 0 auto;
z-index: 10003;
background:#FFFFFF;
text-align: center;
}
.graffiti_fullscreen#graffiti_bottombar {
position: absolute;
bottom: 0px;
}

#graffiti_controls {
width: 586px;
margin: 0 auto;
}

#graffiti_cpwrap {
display: none;
opacity: 0;
margin: 0;
position: relative;
top: -210px;
left: 62px;
padding-top: 7px;
padding-bottom: 6px;
padding-left: 7px;
padding-right: 7px;
width: 253px;
overflow: hidden;
background-color:#E5E5E5;
z-index: 10013;
box-shadow: 0 0 3px rgba(214,214,214,0.6);
-moz-box-shadow: 0 0 3px rgba(214,214,214,0.6);
-webkit-box-shadow: 0 0 3px rgba(214,214,214,0.6);
}

#graffiti_rewrap {
width: 586px;
height: 0;
display: block;
margin: 0 auto;
overflow: visible;
}

.graffiti_fullscreen#graffiti_rewrap {
position: absolute;
bottom: 0px;
left: 50%;
}

.graffiti_fullscreen#graffiti_cpwrap {
left: -230px;
}

#graffiti_hist_helper {
position: absolute;
top: -7777px;
left: -7777px;
}

#graffiti_resizer {
margin: 0;
padding: 0;
height: 15px;
background: url('/images/pics/graffiti_resizer.gif') no-repeat center 1px;
cursor: s-resize;
}

.graffiti_fullscreen#graffiti_resizer {
display: none;
}

#graffiti_save {
width: 1px;
height: 1px;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}


// Developed by Oleg Berman
// http://vk.com/olegberman
var Graffiti = {
init: function() {
var useragent = navigator.userAgent.toLowerCase();
if(/android|iphone|ipod|ipad|opera mini|opera mobi/i.test(useragent)) {

}
this.W = 586;
this.H = 293;
this.factor = 1;
this.brush = {
size: 0,
opacity: 0,
color: "51, 102, 153"
};
this.resizing = false;
this.resDif = 0;
this.resW = 586;
this.resH = 293;
this.fsEnabled = false;
this.resizer = ge("graffiti_resizer");
this.histHelpCanv = ge("graffiti_hist_helper");
this.histHelpCtx = this.histHelpCanv.getContext("2d");
this.canvWrapper = ge("graffiti_aligner");
this.mainCanv = ge("graffiti_common");
this.mainCtx = this.mainCanv.getContext("2d");
this.overlayCanv = ge("graffiti_overlay");
this.overlayCtx = this.overlayCanv.getContext("2d");
this.helpCanv = ge("graffiti_helper");
this.helpCtx = this.helpCanv.getContext("2d");
this.controlsCanv = ge("graffiti_controls");
this.controlsCtx = this.controlsCanv.getContext("2d");
this.grWrapper = ge("graffiti_wrapper");
this.cpWrapper = ge("graffiti_cpwrap");
this.cpCanv = ge("graffiti_cpicker");
this.rzLink = ge("graffiti_resize_link");
this.cpCtx = this.cpCanv.getContext("2d");
this.addSlider("size", this.controlsCtx, 267, 31, 20);
this.addSlider("opacity", this.controlsCtx, 483, 31, 80);
this.redrawColorPickerButton(this.controlsCtx, 147, 30, "51, 102, 153", false);
this.addText(this.controlsCtx, cur.lang| e.keyCode == 16) {
Graffiti.drawPath = true;
return;
}
switch(e.keyCode) {
case 90:
if(!e.ctrlKey) return;
if(Graffiti.keyboardBlocked) return;
Graffiti.keyboardBlocked = true;
Graffiti.backHistory();
break;
case 70:
if(!e.ctrlKey) return;
Graffiti.fullScreen();
break;
}
break;
case "keyup":
if(e.shiftKey || e.keyCode == 16) {
Graffiti.stopDrawPathLine();
return;
}
if(e.keyCode == 90) {
Graffiti.keyboardBlocked = false;
}
break;
}
},

handleControlsEvents: function(e) {
switch(e.type) {
case "mousedown":
var mouse = Graffiti.getMouseXY(e, Graffiti.controlsCanv);
var sl = Graffiti.sliders;
for(var i=0; i < sl.length; i++) {
if(mouse.x >= sl[i
.x && mouse.x <= sl| 586;
Graffiti.H = Graffiti.resH || 293;

Graffiti.factor = Graffiti.H / 293;

hide(Graffiti.mainCanv);

animate(Graffiti.grWrapper, {
top: Graffiti.boxPos[1
,
left: Graffiti.boxPos[0],
height: Graffiti.H + 140,
width: Graffiti.W + 45
}, 200);

animate(Graffiti.canvWrapper, {
width: Graffiti.W,
height: Graffiti.H,
marginTop: -185,
marginLeft: 22
}, 200, function() {

show(Graffiti.mainCanv);

Graffiti.resizeCanvases(Graffiti.W, Graffiti.H)

Graffiti.copyImage(Graffiti.mainCtx);
Graffiti.blockResize = false;
Graffiti.rzLink.innerHTML = cur.lang['graffiti_full_screen'];

removeClass(Graffiti.grWrapper, 'graffiti_fullscreen');
setStyle(Graffiti.grWrapper, {height: 'auto', width: '100%'});
setStyle(Graffiti.canvWrapper, {margin: '0 auto'});
});
}
},

resizeCanvases: function(w, h) {
Graffiti.mainCanv.width = w;
Graffiti.mainCanv.height = h;
Graffiti.overlayCanv.width = w;
Graffiti.overlayCanv.height = h;
Graffiti.helpCanv.width = w;
Graffiti.helpCanv.height = h;
Graffiti.helpCanv.style.top = (-1 * (h*2)).toFixed()+"px";
Graffiti.overlayCanv.style.top = (-1 * (h))+"px";
},

exportBlocked: false,

exportSVG: function(needStr) {
if (Graffiti.exportBlocked) return;
Graffiti.exportBlocked = true;
var svg = '<?xml version="1.0" standalone="yes"?>';
svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
svg += '<svg width="1172px" height="586px" viewBox="0 0 1172 586" xmlns="http://www.w3.org/2000/svg" version="1.1">';
if (Graffiti.gstorage.length != 0) {
for (var i=0; i<Graffiti.gstorage.length; i++) {
svg += Graffiti.drawSVG(Graffiti.gstorage[i]);
}
}
svg += "</svg>";
Graffiti.exportBlocked = false;
if (needStr) {
return svg;
} else {
var savewindow = window.open("data:image/svg+xml,"+encodeURIComponent(svg));
window.focus();
}
},

drawSVG: function(params) {
var str = '<path d="';
var color, size, opacity;
var mouse = { x: [], y: [] };
var fact = params.factor;
for(var i=0; i<params.mouse.x.length; i++) {
mouse.x.push(params.mouse.x[i] / fact * 2);
mouse.y.push(params.mouse.y[i] / fact * 2);
}
color = params.color;
opacity = params.opacity;
size = params.size / fact * 2;
if(mouse.x.length < 2) {
str += "M"+mouse.x[0] + ","+mouse.y[0]+" ";
str += "L"+(mouse.x[0] + 0.51) + "," + mouse.y[0] + " ";
str += '" fill="none" stroke="rgb('+color+')" stroke-opacity="'+opacity+'" stroke-width="'+size+'" stroke-linecap="round" stroke-linejoin="round" />';
return str;
}
str += "M"+mouse.x[0]+","+mouse.y[0]+" ";
str += "L"+((mouse.x[0] + mouse.x[1]) * 0.5)+","+((mouse.y[0] + mouse.y[1]) * 0.5)+" ";
var i = 0;
while(++i < (mouse.x.length -1)) {
var abs1 = Math.abs(mouse.x[i-1] - mouse.x[i]) + Math.abs(mouse.y[i-1] - mouse.y[i])
+ Math.abs(mouse.x[i] - mouse.x[i+1]) + Math.abs(mouse.y[i] - mouse.y[i+1]);
var abs2 = Math.abs(mouse.x[i-1] - mouse.x[i+1]) + Math.abs(mouse.y[i-1] - mouse.y[i+1]);
if(abs1 > 10 && abs2 > abs1 * 0.8) {
str += "Q" + mouse.x[i] + "," + mouse.y[i] +" "+ ((mouse.x[i] + mouse.x[i+1]) * 0.5)+","+((mouse.y[i] + mouse.y[i+1]) * 0.5)+" ";
continue;
}
str += "L"+mouse.x[i]+","+mouse.y[i]+" ";
str += "L"+((mouse.x[i] + mouse.x[i+1]) * 0.5)+","+((mouse.y[i] + mouse.y[i+1]) * 0.5)+" ";
}
str += "L" + mouse.x[mouse.x.length-1] + "," + mouse.y[mouse.y.length-1] + " ";
str += '" fill="none" stroke="rgb('+color+')" stroke-opacity="'+opacity+'" stroke-width="'+size+'" stroke-linecap="round" stroke-linejoin="round" />';
return str;
},

getMouseXY: function(e, obj) {
var cursor = {};
var objpos = getXY(obj);
cursor.x = e.pageX - objpos[0];
cursor.y = e.pageY - objpos[1];
/*if (browser.opera && (obj == Graffiti.controlsCanv)) {
cursor.y += scrollGetY();
}*/
return cursor;
},

isChanged: function() {
return (Graffiti.hstorage.length || Graffiti.checkPoint);
},

getImage: function(callback) {
var b = {w: Graffiti.W, h: Graffiti.H, f: Graffiti.factor};
/*Graffiti.factor = 1;
Graffiti.W = 586;
Graffiti.H = 293;*/

Graffiti.factor = 1280/586;
Graffiti.W = 1280;
Graffiti.H = 640;

var saveCanv = ce('canvas', {width: Graffiti.W, height: Graffiti.H});
var ctx = saveCanv.getContext('2d');
Graffiti.copyImage(ctx, function() {
Graffiti.factor = b.f;
Graffiti.W = b.w;
Graffiti.H = b.h;
callback(saveCanv.toDataURL());
});
}
}

try{stManager.done('graffiti.js');}catch(e){}
Комментарии
Пока нет ни одного комментария.