<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/WangWeiqiang/pen/Cadyu?depth=everything&order=popularity&page=9&q=tools&show_forks=false" />
<style class="cp-pen-styles"> body {
margin: 0px;
padding: 0px;
background-image:url("http://wangweiqiang.net/demo/MagicNote/images/background.jpg");
}
a{
text-decoration:none;
}
#myCanvas{
border:solid 1px #ccc;
margin-right:auto;
margin-left:auto;
display:block;
margin-top:10px;
box-shadow:#555 0px 0px 18px;
background-color:#fff;
}
#myCanvas:active{
/*cursor: url(images/pencil-cursor.png) -80 -40;*/
}
#bottombar{
text-align:center;
font-size:2em
}
.toolbar{
position:fixed;
background-color:#fff;
width:42px;
left:0px;
box-shadow: #999 1px 1px 11px;
border-bottom-right-radius:5px;
}
#handler{
position:absolute;
top:0;
left:42px;
background-color:#fff;
padding: 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 16px;
box-shadow: #999 3px 1px 5px;
}
#handler .handler-item{
display:block;
width:10px;
height:10px;
border-radius:5px;
background-color:#999;
margin:5px 2px;
}
#handler .colorshow{
background-color:#000;
}
.show{
left:0;
}
.toolbar ul{
margin:5px;
padding:0;
}
.spliter{
height:1px;
background-color:#ddd;
margin: 5px 5px 10px 5px;
}
.toolbar ul:last{
border-bottom:none;
}
.toolbar ul li{
list-style:none;
height:42px;
}
.toolbar ul li img{
opacity:0.5
}
.toolbar ul li img:hover{
opacity:1;
}
#backgroundlist li img{
opacity:1;
}
#selectedcolor{
display:block;
width:32px;
height:32px;
border-radius:32px;
}
#colorpicker{
height:78px;
}
#colorlist{
position: relative;
margin: 0;
padding: 0;
width: 404px;
top: -38px;
left: 37px;
background-color: #fff;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-left: 15px;
box-shadow: #999 5px 1px 8px
}
#colorlist li{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 32px;
margin: 5px 0 0 0;
}
#backgroundlist{
position: relative;
margin: 0;
padding: 0;
width: 500px;
top: -38px;
left: 37px;
background-color: #fff;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-left: 15px;
box-shadow: #999 5px 1px 8px
}
#backgroundlist li{
display: inline-block;
width: 120px;
height: 120px;
margin: 5px 0 0 0;
}
#tools{
position: relative;
margin: 0;
padding: 0;
width: 150px;
top: -38px;
left: 37px;
background-color: #fff;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-left: 15px;
box-shadow: #999 5px 1px 8px
}
#tools li{
display: inline-block;
width: 32px;
height: 32px;
margin: 5px 0 0 0;
}
#opendialog{
position: relative;
margin: 0;
padding: 0;
width: 530px;
top: -38px;
left: 37px;
background-color: #fff;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-left: 15px;
box-shadow: #999 5px 1px 8px;
overflow:hidden;
height:156px;
}
#opendialog li{
display: inline-block;
width: 120px;
height: 149px;
margin: 5px;
text-align: center
}</style></head><body>
<script src="https://wangweiqiang.net/demo/MagicNote/js/background.js"></script>
<script src="https://wangweiqiang.net/demo/MagicNote/js/canvas2image.js"></script>
<script src="https://wangweiqiang.net/demo/MagicNote/js/base64.js"></script>
<script src="https://wangweiqiang.net/demo/MagicNote/js/canvastoblob.js"></script>
<script src="https://wangweiqiang.net/demo/MagicNote/js/canvastoblob.js"></script>
<div class="toolbar">
<a id="handler" href="javascript:;" onclick="switchToolBar()">
<span class="handler-item"></span>
<span class="handler-item colorshow"></span>
<span class="handler-item"></span>
</a>
<ul>
<li><a href="javascript:;" onclick="myCanvas.Brush.Change('pencil')" title="Pencil"><img src="http://wangweiqiang.net/demo/MagicNote/images/pencil.png" alt="Pencil"></a></li>
<li><a href="javascript:;" onclick="myCanvas.Brush.Change('quill')" title="Quill"><img src="http://wangweiqiang.net/demo/MagicNote/images/quill.png" alt="Quill"></a></li>
<li><a href="javascript:;" onclick="myCanvas.Brush.Change('highlightmarker')" title="Highlight Marker"><img src="http://wangweiqiang.net/demo/MagicNote/images/highlightmarker.png" alt="Highlight Marker"></a></li>
<li><a href="javascript:;" onclick="myCanvas.Brush.Change('ereaser')" title="Eraser"><img src="http://wangweiqiang.net/demo/MagicNote/images/eraser.png" alt="Eraser"></a></li>
<li>
<a href="javascript:;" onclick="showTools()" title="More Tools"><img src="http://wangweiqiang.net/demo/MagicNote/images/tools.png"></a>
<ul id="tools" style="display:none">
<li><a href="javascript:;" onclick="myCanvas.Brush.Change('line')" title="Line"><img src="http://wangweiqiang.net/demo/MagicNote/images/line.png"></a></li>
<li><img src="http://wangweiqiang.net/demo/MagicNote/images/square.png"></li>
<li><img src="http://wangweiqiang.net/demo/MagicNote/images/circle.png"></li>
<li><a href="javascript:;" onclick="myCanvas.Brush.Change('coordinate')" title="Insert Coordinate"><img src="http://wangweiqiang.net/demo/MagicNote/images/chart_xy.png"></a></li>
</ul>
</li>
</ul>
<div class="spliter"></div>
<ul id="colorpicker">
<li>
<a href="javascript:;" onclick="showColorList()" id="selectedcolor" data-color="#000" style="background-color:#000;" title="Color"></a>
<ul id="colorlist" style="display:none">
<li data-color="#000000" style="background-color:#000000"></li>
<li data-color="#2e3136" style="background-color:#2e3136"></li>
<li data-color="#ae352c" style="background-color:#ae352c"></li>
<li data-color="#126a76" style="background-color:#126a76"></li>
<li data-color="#677333" style="background-color:#677333"></li>
<li data-color="#972f38" style="background-color:#972f38"></li>
<li data-color="#c4a000" style="background-color:#c4a000"></li>
<li data-color="#9b59b6" style="background-color:#9b59b6"></li>
<li data-color="#16a085" style="background-color:#16a085"></li>
<li data-color="#910000" style="background-color:#910000"></li>
<li data-color="#8f5902" style="background-color:#8f5902"></li>
</ul>
</li>
<li>
<a href="javascript:;" onclick="showBackgroundList()" data-background="" title="Background"><img src="http://wangweiqiang.net/demo/MagicNote/images/background.png"></a>
<ul id="backgroundlist" style="display:none">
<li data-img=""><img src="data:image/jpg;base64,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"></li>
<li data-img=""><img src="data:image/jpg;base64,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"></li>
<li data-img=""><img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSgBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIAHgAeAMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/APooHnngdOaADPQDBx6GgAySRgkZ9qAI2yckkEe/agBuM5J69aAIxu80jg+pxgmgCSNsgnIAzgUAOJxkK3HtQAhPHUsB2BxQA4AlwTgDHXPNAEkef4eg4NADxkr0z3xQA3BOSwx9elABtwRxz9RQA5Rnqv50AQnCljtI9aAG5Ug7efUA0ALwGzjLY6DHSgBhAwARkHmgBCApCjpQBFs5CspIxkn0oAeCuAMkgjGc5/M0ANRiUCAoGDbcBsgD/GgCZF7NyOwxQBIAR94DHY0ASLhTjjPtQAKc8dOfWgBQMDgZwe9AChAGzz+fFADsDuaAIQeuGPXHvQBAx2c8Jn270AMcqrDcq8jOfT/OKABFbrnHbHJyP6UASydM7cn1oArncynf8pHYjr/nFAD4oyVGSWHPUk/zoAmCg4BwR0PNADhhcjJwec0APBwoDAE9CRQApztGeO3NADxx7HpnGKAFIPOePxoAUA4HNAC0AV+Ac8fhQA3bleR/KgCFwxbO3IzjqOfegB2zkAbm2+9AEUrl3xyvuBQAvO48jnJ+U9aAJEcLuVmAfjv/AJ9KAJRtwNwA9c0AMT5VyeQTxQBIhzjHUflQBJwOuPXrQAjMq43cc0APDA4wPegBw56YzQAHpQBUZwM4PXvnmgBeoGTz6jtQAhXacls+poAaZG3bAuVP8WKAI3RtpAHPrnFAEkSALz9NpNADmXkEHHPSgCUANnqPagAMfGck57UAGPb2xQA5euDg4oAXAz680AOIyaAADb60AIcAZ70AQ43DHUeooAjC7SByMd6AAjJPUn07UANJJHpigCOVd+M78jPQ9KAJbfayDaT2zmgCc8DPJ/CgADcD1xxQA4HgY+tAAwyOuM0AJjOMH680APH8qADpQAEigCNSTK2M8DHNAEYBb0x14NADiAQBk8+lAETq2/byE9uaAHCIBQMn6CgBQoBGBz60APVQoHfNADiOOKAEUdT/ACoAdxjgUAKAPagBvCng0AOJ9aAGgk9OlACc57596AHKMcigCIKn95c/rQA9Qe5GPWgBANp6g/jQA44PPt60ANAPGSSPbpQA7bkAUAKF4PQCgBAdpxg+uaAEkJAJUbsc45oApiVgfmbBGMHB5oAsRdWJIP40AOUszEAHr1oAlxwR0+tACFSDyT0oAcMZoAgXAGRnB6nHBoAfwO/5UABXIxnigBVUL0oACuW46+9ACoQc4OcUAOOcUAIRjnk/WgBsgEiFW6EdKAIHtycBZDnuTQBJFEUFAEoUDPcmgBeo5xQAi/doATIB5NAEIkwATlV9xQAsZ3/MDlaAHkgMO1ADh06CgAbJGOORQAiIETAOR7mgB46cc0AIc5zwR7UAAPAxQAYJzmgBcYoAQdxQAu7AoAXINADCAfp60AVyduVIJwB+NAD1LAD5fl9qABgGTacjNAEoG0cE46UAAyBQAE8YoAhkfy1AJxnuKAGJIrOpEjEAdM9TQBaHbHHtQA7GDxxQAp9qAGnqeOKAGHOfagAHHB5PpQAEj1xQBEXJ4ByaAAHALEHI7UAMZkkXbnOemDQBPEuBgdOvNADskjjtQAhB7Y5oAimXcvJDbecUAMhUKmSfpgYxQBOikc9qAJh69aAExQAjDA7UANxxz1oAMcmgBmBkE4oAapDDPUn8aAA8jaRwfWgBqgKxUYAoAlHGaAHE89KAGkhh6gUAAQA9B+VADgoxg9+uaAHLxwDQA4n8KADpQAHpQA3HNACdDxigAK5HsOaAK3mKvBOPrQBMORnp+FACAfMO1ADmbB5xQBGwLx560AOjUhADQBKOBQAZoAM9v1oAUYB470ABznr+FAAOc5oAB2xQAh55oAO3agCsCq4YnB+tAEuSQOQKAELiMEsDj1FADcg4YHKnoRQAbiCRnA7UAOD7cAn8zQA5ScUAOP3eTigCNQT6/jQBOOBQAg6E5zQAhHOaAFz2oAO3XigBuDjrigD/AP/Z"></li>
<li data-img=""><img src="data:image/jpg;base64,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"></li>
<li data-img=""><img src="data:image/jpg;base64,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"></li>
<li data-img=""><img src="data:image/jpg;base64,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"></li>
<li data-img=""><img src="data:image/jpg;base64,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"></li>
<li data-img=""><img src="data:image/jpg;base64,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"></li>
</ul>
</li>
</ul>
<div class="spliter"></div>
<ul>
<li><a href="javascript:;" onclick="myCanvas.Clear()" title="New"><img src="http://wangweiqiang.net/demo/MagicNote/images/new.png" alt="New"></a></li>
<li>
<a href="javascript:;" onclick="showOpenDialog()" title="Open"><img src="http://wangweiqiang.net/demo/MagicNote/images/open.png" alt="Open"></a>
<ul id="opendialog" style="display:none">
</ul>
</li>
<li><a href="javascript:;" onclick="myCanvas.Save()" title="Save"><img src="http://wangweiqiang.net/demo/MagicNote/images/save.png" alt="Save"></a></li>
<li><a href="javascript:;" onclick="myCanvas.DownloadPngImage()" title="Export PNG Image"><img src="http://wangweiqiang.net/demo/MagicNote/images/download.png" alt="Download Image"></a></li>
<li><a href="javascript:;" onclick="shareImage()" title="Share"><img src="http://wangweiqiang.net/demo/MagicNote/images/share.png" alt="Share"></a></li>
<li><a href="http://wangweiqiang.net" target="_blank" title="About"><img src="http://wangweiqiang.net/demo/MagicNote/images/information.png" alt="About"></a></li>
</ul>
</div>
<canvas id="myCanvas" data-backgroundimg="" width="1880" height="980" style="cursor: url(http://wangweiqiang.net/demo/MagicNote/images/pencil-cursor.png) 0 0, auto;"></canvas>
<div id="bottombar"><a href="javascript:myCanvas.ExtandHeight(500)"><img src="http://wangweiqiang.net/demo/MagicNote/images/expand-down.png"></a></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >var ProjectList=[];
function Canvas(domid){
var canvasobj=this;
this.canvas=document.getElementById(domid);
this.canvas.width=screen.width-40;
this.canvas.height=screen.height-100;
this.Context=this.canvas.getContext('2d');
this.mouse={x:0,y:0};
this.Brush=new Brush(this.Context,0,0);
this.Saved=false;
this.Data={
filename:"Untitled",
thum:"",
background:"",
content:"",
createdate:new Date(),
lastmodify:new Date()
};
this.SetBackground=function(img){
$("#"+domid).css("background-image","url(data:image/jpg;base64,"+img+")");
$("#"+domid).data().backgroundimg=img;
};
this.ExtandHeight=function(height){
var buffer=document.createElement("canvas");
buffer.width=canvasobj.canvas.width;
buffer.height=canvasobj.canvas.height;
var bufferCtx=buffer.getContext('2d');
bufferCtx.drawImage(canvasobj.canvas,0,0);
canvasobj.canvas.height+=height;
canvasobj.Context.drawImage(buffer,0,0);
};
this.Clear=function(){
canvasobj.canvas.width=screen.width-40;
canvasobj.canvas.height=screen.height-100;
canvasobj.Context.clearRect(0,0,canvasobj.canvas.width,canvasobj.canvas.height);
canvasobj.Data.filename="Untitled";
canvasobj.Data.thum="";
canvasobj.Data.background="";
canvasobj.Data.content="";
canvasobj.Data.createdate=new Date();
canvasobj.Data.lastmodify=new Date();
};
this.DownloadPngImage=function(){
var buffer=document.createElement("canvas");
buffer.width=canvasobj.canvas.width;
buffer.height=canvasobj.canvas.height;
var bufferCtx=buffer.getContext('2d');
//draw background
var imageObj = new Image();
imageObj.onload = function() {
var pattern = bufferCtx.createPattern(imageObj, 'repeat');
bufferCtx.rect(0, 0, buffer.width, buffer.height);
bufferCtx.fillStyle = pattern;
bufferCtx.fill();
//draw front
bufferCtx.drawImage(canvasobj.canvas,0,0);
//save as png img
buffer.toBlob(function (blob) {
saveAs(blob, "exported_image.png");
}, "image/png");
};
imageObj.src ="data:image/jpg;base64,"+ $("#"+domid).data().backgroundimg;
}
this.Load=function(data){
canvasobj.Data=data;
var img=new Image();
img.onload=function(){
canvasobj.canvas.width=img.width;
canvasobj.canvas.height=img.height;
canvasobj.Context.clearRect(0,0,canvasobj.canvas.width,canvasobj.canvas.height);
canvasobj.Context.drawImage(img,0,0);
canvasobj.SetBackground(data.background);
};
img.src=data.content;
};
this.Save=function(){
if(canvasobj.Data.filename=="Untitled" && canvasobj.Data.thum=="" && canvasobj.Data.content==""){ //new document
var filename=prompt("Please input a name:");
if(filename==""){
alert("Name can not be empty!");
return false;
}
//update canvasobj.Data
canvasobj.Data.filename=filename;
canvasobj.Data.background=$(myCanvas.canvas).data().backgroundimg;
canvasobj.Data.content=myCanvas.canvas.toDataURL();
resizeImage(canvasobj.Data.content, 120, 120, function(url,f){
canvasobj.Data.thum=url;
if(ProjectList==null || ProjectList.length==0){
ProjectList=[];
ProjectList.push(canvasobj.Data);
}
else
{
ProjectList.push(canvasobj.Data);
}
localStorage.setItem("magicnote",JSON.stringify(ProjectList));
canvasobj.Saved=true;
}, canvasobj.Data);
}
else //exist document
{
$.each(ProjectList,function(i,n){
if(n.filename==canvasobj.Data.filename){
n.content=myCanvas.canvas.toDataURL();
n.background=$(myCanvas.canvas).data().backgroundimg;
resizeImage(n.content, 120, 120, function(url,f){
n.thum=url;
localStorage.setItem("magicnote",JSON.stringify(ProjectList));
canvasobj.Saved=true;
}, n);
}
});
}
};
this.mouseDown=function(e){
var xy=canvasobj.ev_canvas(e);
canvasobj.mouse.x=xy.x;
canvasobj.mouse.y=xy.y;
canvasobj.Brush.x=canvasobj.mouse.x;
canvasobj.Brush.y=canvasobj.mouse.y;
canvasobj.Brush.StartStroke();
};
this.mouseMove=function(e){
var xy=canvasobj.ev_canvas(e);
canvasobj.mouse.x=xy.x;
canvasobj.mouse.y=xy.y;
canvasobj.Brush._latest.x=canvasobj.mouse.x;
canvasobj.Brush._latest.y=canvasobj.mouse.y;
if(canvasobj.Brush._isStroke){
canvasobj.Saved=false;
}
canvasobj.Brush.render();
};
this.mouseUp=function(e){
var xy=canvasobj.ev_canvas(e);
canvasobj.mouse.x=xy.x;
canvasobj.mouse.y=xy.y;
canvasobj.Brush.EndStroke();
};
this.ev_canvas=function(ev) {
if (false) {
ev._x = ev.touches[0].clientX;
ev._y = ev.touches[0].clientY; // CH: Is there a better way to do this?
}
else if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
ev._x = ev._x + 0.5;
return {x:ev._x,y:ev._y};
};
this.canvas.addEventListener("mousedown",canvasobj.mouseDown,false);
this.canvas.addEventListener("mousemove",canvasobj.mouseMove,false);
this.canvas.addEventListener("mouseup",canvasobj.mouseUp,false);
}
function Brush(ctx,x,y){
var brushObj=this;
this.Name="pencil";
this.Color={r:0,g:0,b:0,a:0};
this.Opacity=1;
this.Size=1;
this.DrawMode="source-over";
this.LineJoin="round";
this.LineCap="round";
this.InkAmount=0;
this.ShadowBlur=0.5;
this.ShadowColor="#000000";
this.SplashRange=0;
this.SplashInkSize=0;
this._currentLineWidth=1;
this._strokeId=null;
this._isStroke=false;
this._strokeRenderCount=0;
this._hairs=null;
this._latest={x:0,y:0};
this.x=x;
this.y=y;
this.StartStroke=function(){
brushObj.resetTip();
brushObj._strokeId = new Date().getTime();
brushObj._isStroke = true;
};
this.EndStroke=function() {
brushObj._isStroke = false;
brushObj._strokeRenderCount = 0;
brushObj._strokeId = null;
};
this.resetTip=function() {
var hairs = brushObj._hairs = [];
var inkAmount = brushObj.InkAmount;
var hairNum = brushObj.Size * 10;
var range = brushObj.Size / 4;
var rx, ry, c0, x0, y0;
var c = random(Math.PI * 4), cv, sv, x, y;
for (var i = 0, r; i < hairNum/3; i++) {if (window.CP.shouldStopExecution(1)){break;}
rx = random(range);
ry = rx / 4;
c0 = random(Math.PI * 4);
x0 = rx * Math.sin(c0);
y0 = ry * Math.cos(c0);
cv = Math.cos(c);
sv = Math.sin(c);
x = brushObj.x;
y = brushObj.y;
hairs[i] = new Hair(x, y, brushObj);
}
window.CP.exitedLoop(1);
//this.color.h += 140;
};
this.render=function() {
brushObj._strokeRenderCount++;
if (!brushObj._latest) {
brushObj._latest = { x: brushObj.x, y: brushObj.y };
} else {
//brushObj._latest.x = brushObj.x;
//brushObj._latest.y = brushObj.y;
}
var dx = brushObj._latest.x-brushObj.x ;
var dy = brushObj._latest.y-brushObj.y ;
var dist = brushObj._latestStrokeLength = Math.sqrt(dx * dx + dy * dy);
var hairs = brushObj._hairs;
var i, len;
for (i = 0, len = hairs.length; i < len; i++) {if (window.CP.shouldStopExecution(2)){break;}
hairs[i].update(dx, dy, dist,brushObj);
}
window.CP.exitedLoop(2);
if (brushObj._isStroke) {
for (i = 0, len = hairs.length; i < len; i++) {if (window.CP.shouldStopExecution(3)){break;}
hairs[i].draw(ctx);
}
window.CP.exitedLoop(3);
}
brushObj.x=brushObj._latest.x;
brushObj.y=brushObj._latest.y;
};
this.Change=function(type){
switch(type){
case "pencil":
myCanvas.Brush.Name="pencil";
myCanvas.Brush.Opacity=0.8;
myCanvas.Brush.Size=1;
myCanvas.Brush.DrawMode="source-over";
myCanvas.Brush.LineJoin="round";
myCanvas.Brush.LineCap="round";
myCanvas.Brush.InkAmount=1;
myCanvas.Brush.ShadowBlur=2;
myCanvas.Brush.ShadowColor="#000000";
myCanvas.Brush.SplashRange=0;
myCanvas.Brush.SplashInkSize=0;
$("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/pencil-cursor.png) 0 0,auto")
break;
case "quill":
myCanvas.Brush.Name="quill";
myCanvas.Brush.Opacity=1;
myCanvas.Brush.Size=1;
myCanvas.Brush.DrawMode="source-over";
myCanvas.Brush.InkAmount=5;
myCanvas.Brush.ShadowBlur=2;
myCanvas.Brush.ShadowColor="#000000";
myCanvas.Brush.SplashRange=2;
myCanvas.Brush.SplashInkSize=2;
$("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/quill-cursor.png) 0 0,auto")
break;
case "highlightmarker":
myCanvas.Brush.Name="highlightmarker";
myCanvas.Brush.Opacity=0.005;
myCanvas.Brush.Size=40;
myCanvas.Brush.DrawMode="source-over";
myCanvas.Brush.InkAmount=50;
myCanvas.Brush.ShadowBlur=50;
myCanvas.Brush.SplashRange=20;
myCanvas.Brush.SplashInkSize=20;
$("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/highlightmarker-cursor.png) 0 0,auto");
break;
case "ereaser":
myCanvas.Brush.Name="ereaser";
myCanvas.Brush.Opacity=1;
myCanvas.Brush.Size=20;
myCanvas.Brush.DrawMode="destination-out";
myCanvas.Brush.LineJoin="round";
myCanvas.Brush.LineCap="round";
myCanvas.Brush.InkAmount=0;
myCanvas.Brush.ShadowBlur=0;
myCanvas.Brush.ShadowColor="#000000";
myCanvas.Brush.SplashRange=0;
myCanvas.Brush.SplashInkSize=0;
$("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/eraser-cursor.png) 0 0,auto")
break;
case "coordinate":
gPenMode="coordinate";
$("#myCanvas").css("cursor","url(http://wangweiqiang.net/demo/MagicNote/images/chart_xy.png) 0 0,auto")
break;
}
};
this.resetTip();
}
function Hair(x, y, brush) {
this.x = x || 0;
this.y = y || 0;
this.brush=brush;
this._latest = { x: this.x, y: this.y };
}
Hair.prototype = {
update: function(strokeX, strokeY, strokeLength,brush) {
this._latest.x = this.x;
this._latest.y = this.y;
this.x += strokeX;
this.y += strokeY;
this.brush=brush;
this.opacity=brush.Opacity;
this.shadowblur=brush.ShadowBlur;
this.drawmode=brush.DrawMode;
this.name=brush.Name;
this.linecap=brush.LineCap;
this.linejoin=brush.LineJoin;
switch(brush.Name){
case "pencil":
case "quill":
case "highlightmarker":
this._currentLineWidth=brush.Size* Math.min(brush.InkAmount / strokeLength, 1);
break;
default:
this._currentLineWidth=brush.Size;
break;
}
},
draw: function(ctx) {
ctx.save();
line(ctx, this,this._latest, this._currentLineWidth,this.brush);
ctx.restore();
}
};
function line(ctx, p1, p2,lineWidth,brush) {
ctx.shadowColor='rgba('+brush.Color.r+','+brush.Color.g+','+brush.Color.b+','+brush.Opacity+')';
ctx.strokeStyle='rgba('+brush.Color.r+','+brush.Color.g+','+brush.Color.b+','+brush.Opacity+')';
ctx.lineWidth = lineWidth;
ctx.lineCap=brush.LineCap;
ctx.lineJoin=brush.LineJoin;
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
//ctx.arcTo(p1.x + lineWidth, p1.y, p1.x + lineWidth,p1.y + lineWidth/2, lineWidth/2);
ctx.shadowBlur=brush.ShadowBlur;
ctx.globalCompositeOperation=brush.DrawMode
ctx.stroke();
}
function random(max, min) {
if (typeof max !== 'number') {
return Math.random();
} else if (typeof min !== 'number') {
min = 0;
}
return Math.random() * (max - min) + min;
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function resizeImage(url, width, height, callback, file) {
var sourceImage = new Image();
sourceImage.onload = (function (f) {
return function (evt) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
if (sourceImage.width == sourceImage.height) {
canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);
} else {
minVal = Math.min(sourceImage.width, sourceImage.height);
if (sourceImage.width > sourceImage.height) {
canvas.getContext("2d").drawImage(sourceImage, (sourceImage.width - minVal) / 2, 0, minVal, minVal, 0, 0, width, height);
} else {
canvas.getContext("2d").drawImage(sourceImage, 0, (sourceImage.height - minVal) / 2, minVal, minVal, 0, 0, width, height);
}
}
callback(canvas.toDataURL(), f);
}
})(file);
sourceImage.src = url;
}
function switchToolBar(){
if($(".toolbar").hasClass("show")){
$("#colorlist").fadeOut('slow',function(){
$(".toolbar").animate({
left:'-42px'
},500,function(){
$(".toolbar").removeClass("show")
});
});
}
else
{
$(".toolbar").animate({
left:'0'
},500,function(){
$(".toolbar").addClass("show");
});
}
}
function showColorList(){
$("#colorlist").fadeToggle();
}
function showBackgroundList(){
$("#backgroundlist").fadeToggle();
}
function showOpenDialog(){
$("#opendialog").fadeToggle();
}
function showTools(){
$("#tools").fadeToggle();
}
function saveImage(canvas){
var buffer=document.createElement("canvas");
buffer.width=canvas.width;
buffer.height=canvas.height;
var bufferCtx=buffer.getContext('2d');
bufferCtx.drawImage(canvas,0,0);
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
var pattern = context.createPattern(imageObj, 'repeat');
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = pattern;
context.fill();
canvas.getContext('2d').drawImage(buffer,0,0);
};
imageObj.src = gBackground;
var oCanvas = document.getElementById("myCanvas");
Canvas2Image.saveAsPNG(oCanvas);
}
function open(){
}
var myCanvas;
$(function(){
ProjectList=JSON.parse(localStorage.getItem("magicnote"));
if(ProjectList!=null){
var filelist="";
$.each(ProjectList,function(i,n){
filelist+="<li data-filename='"+n.filename+"'><img src='"+n.thum+"' style='background-image:url(data:image/png;base64,"+n.background+")'/><br/>"+n.filename+"</li>";
});
$("#opendialog").html(filelist);
$("#opendialog li").click(function(){
var item=this;
$.each(ProjectList,function(i,n){
if(n.filename==$(item).data().filename){
myCanvas.Load(n);
}
});
showOpenDialog();
});
}
myCanvas=new Canvas("myCanvas");
myCanvas.Brush.Change('pencil');
$("#colorlist li").click(function(){
gColor=$(this).data().color;
gHighLightColor=gColor;
myCanvas.Brush.Color=hexToRgb(gColor);
$("#selectedcolor").css("background-color",gColor);
$("#handler span.colorshow").css("background-color",gColor);
$("#colorlist").fadeOut();
});
$.each($("#backgroundlist li"),function(i,n){
$(n).data().img=Background[i].bg;
$(n).find("img").attr("src","data:image/jpg;base64,"+Background[i].thum);
});
$("#backgroundlist li").click(function(){
gBackground=$(this).data().img;
myCanvas.SetBackground(gBackground);
$("#backgroundlist").fadeOut();
});
document.onselectstart=function(){return false;}
});
//# sourceURL=pen.js
</script>
</body></html>
