Commit 750cda96 authored by Kim Meiser's avatar Kim Meiser

initial import

parents
<!DOCTYPE html>
<html>
<head>
<title>tell.next</title>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="sketch.min.js" type="text/javascript"></script>
<script type="text/javascript">
var colors = ["#4169e1", "#b22222", "#bc8f8f", "#3D59AB", "#f5f5dc", "#b03060", "#cd853f", "#2f4f4f"];
var messages = ["Male mit dem Finger oder hinterlasse eine Nachricht!"
, "Was fehlt hier? Hast du eine Idee? Verbessere dieses Projekt @ git.hacksaar.de/hacksaar/schmierblatt"
, "Kannst du es besser? Starte dein eigenes Projekt: http://getting-started.shared.local.hacksaar.de"
];
function getRandomColor() { return colors[Math.floor(Math.random() * colors.length)]; }
function getRandomMessage() { return messages[Math.floor(Math.random() * messages.length)]; }
function getRandomSize() { return Math.floor(Math.random() * 20 + 10); }
function initialize() {
initMessage();
initCanvas();
}
function initMessage() { $('#message').text(messages[0]); }
function initCanvas() {
var jQcanvas = $('#simple_sketch');
// Gre des Canvas auf aktuelle Bildschirmgre ziehen
var canvas = jQcanvas[0];
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight - 30;
// Sketch-Bibliothek initialisieren
jQcanvas.sketch({ defaultColor: colors[0] });
// Bei jedem Klick auf den Canvas wird Farbe und Gre des Zeichenwerkzeugs und der Hinweistext im Footer neu festgelegt
canvas.onclick = function () {
jQcanvas.sketch('color', getRandomColor());
jQcanvas.sketch('size', getRandomSize());
var message = getRandomMessage();
$('#message').text(message);
};
}
// jQuery ruft initialize() auf, sobald das HTML-Dokument im Browser vollstndig geladen wurde
$(function () { initialize(); });
</script>
</head>
<body>
<canvas id="simple_sketch" style="background-color: khaki; height: 100%; left: 0; position: absolute; top: 0; width: 100%;"></canvas>
<div class="footer" style="background-color: gray; bottom: 0; height: 40px; left: 0; padding-top: 8px; position: absolute; right: 0;">
<div id="message" style="color: white; font-family: Helvetica, Arial, sans-serif; font-size: 26px; position: relative; text-align: center;" />
</div>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
var __slice=Array.prototype.slice;(function(a){var b;return a.fn.sketch=function(){var c,d,e;d=arguments[0],c=2<=arguments.length?__slice.call(arguments,1):[],this.length>1&&a.error("Sketch.js can only be called on one element at a time."),e=this.data("sketch");if(typeof d!="string"||!e)return e?e:(this.data("sketch",new b(this.get(0),d)),this);if(!e[d])return a.error("Sketch.js did not recognize the given command.");if(typeof e[d]=="function")return e[d].apply(e,c);if(c.length===0)return e[d];if(c.length===1)return e[d]=c[0]},b=function(){function b(b,c){this.el=b,this.canvas=a(b),this.context=b.getContext("2d"),this.options=a.extend({toolLinks:!0,defaultTool:"marker",defaultColor:"#000000",defaultSize:5},c),this.painting=!1,this.color=this.options.defaultColor,this.size=this.options.defaultSize,this.tool=this.options.defaultTool,this.actions=[],this.action=[],this.canvas.bind("click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel",this.onEvent),this.options.toolLinks&&a("body").delegate('a[href="#'+this.canvas.attr("id")+'"]',"click",function(b){var c,d,e,f,g,h,i;d=a(this),c=a(d.attr("href")),f=c.data("sketch"),i=["color","size","tool"];for(g=0,h=i.length;g<h;g++)e=i[g],d.attr("data-"+e)&&f.set(e,a(this).attr("data-"+e));return a(this).attr("data-download")&&f.download(a(this).attr("data-download")),!1})}return b.prototype.download=function(a){var b;return a||(a="png"),a==="jpg"&&(a="jpeg"),b="image/"+a,window.open(this.el.toDataURL(b))},b.prototype.set=function(a,b){return this[a]=b,this.canvas.trigger("sketch.change"+a,b)},b.prototype.startPainting=function(){return this.painting=!0,this.action={tool:this.tool,color:this.color,size:parseFloat(this.size),events:[]}},b.prototype.stopPainting=function(){return this.action&&this.actions.push(this.action),this.painting=!1,this.action=null,this.redraw()},b.prototype.onEvent=function(b){return b.originalEvent&&b.originalEvent.targetTouches&&(b.pageX=b.originalEvent.targetTouches[0].pageX,b.pageY=b.originalEvent.targetTouches[0].pageY),a.sketch.tools[a(this).data("sketch").tool].onEvent.call(a(this).data("sketch"),b),b.preventDefault(),!1},b.prototype.redraw=function(){var b;this.el.width=this.canvas.width(),this.context=this.el.getContext("2d"),b=this,a.each(this.actions,function(){if(this.tool)return a.sketch.tools[this.tool].draw.call(b,this)});if(this.painting&&this.action)return a.sketch.tools[this.action.tool].draw.call(b,this.action)},b}(),a.sketch={tools:{}},a.sketch.tools.marker={onEvent:function(a){switch(a.type){case"mousedown":case"touchstart":this.startPainting();break;case"mouseup":case"mouseout":case"mouseleave":case"touchend":case"touchcancel":this.stopPainting()}if(this.painting)return this.action.events.push({x:a.pageX-this.canvas.offset().left,y:a.pageY-this.canvas.offset().top,event:a.type}),this.redraw()},draw:function(a){var b,c,d,e,f;this.context.lineJoin="round",this.context.lineCap="round",this.context.beginPath(),this.context.moveTo(a.events[0].x,a.events[0].y),f=a.events;for(d=0,e=f.length;d<e;d++)b=f[d],this.context.lineTo(b.x,b.y),c=b;return this.context.strokeStyle=a.color,this.context.lineWidth=a.size,this.context.stroke()}},a.sketch.tools.eraser={onEvent:function(b){return a.sketch.tools.marker.onEvent.call(this,b)},draw:function(b){var c;return c=this.context.globalCompositeOperation,this.context.globalCompositeOperation="copy",b.color="rgba(0,0,0,0)",a.sketch.tools.marker.draw.call(this,b),this.context.globalCompositeOperation=c}}})(jQuery)
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment