import Painter from 'canvas_painter'

// create painter
// in your html: <canvas id='canvas' width=600 height=400></canvas>
const painter = Painter.createPainter(document.getElement("canvas"));

// modify context
painter.ctx({
    fillStyle: "#f0f0f0",
    strokeStyle: "#555",
    lineWidth: 2,
    font: 'bold 14px sanserif'
})

// clear
painter.clear(0, 0, 600, 400);

// fill rect
painter.begin().rect(0, 0, 600, 400).fill().close();

// draw lines
// 1px solid #666
painter.begin().moveTo(100, 60).lineTo(200, 60).stroke("#666").close(); 
// 1px dashed #666
painter.begin().moveTo(100, 80).lineTo(200, 80).setLineDash([5,5]).stroke().close();
// 5px solid #ddd
painter.begin().moveTo(100, 100).lineTo(200, 100).lw(5).setLineDash([0,0]).stroke("#ddd").close();
// polyline
painter.begin().polyline(100, 120, 200, 120, 200, 130, 100, 130, 100, 140, 200, 140).lw(2).stroke("#999").close();

// curve
// quadraticCurve
painter.begin().mt(100, 160).qc(150, 200, 200, 160).stroke().close();
// bezierCurve
painter.begin().mt(100, 180).bc(100, 230, 200, 230, 200, 180).stroke().close();

// arc 
painter.begin().arc(150, 280, 50, 0, Math.PI*3/2, false).stroke().close();

// text
painter.font(16, 'center', 'middle', 'sanserif', 'bold').text('Canvas Painter Text', 300, 30, '#333');

// circle at (300, 300) radius 50;
painter.begin().arc(300, 100, 40, 0, Math.PI*2).lw(2).fill('#ddd').stroke().close();
// ellipse
painter.begin().ellipse(300, 190, 60, 30).fill().stroke().close();

// rect
painter.begin().rect(260, 240, 80, 80).fill().stroke().close();

// polygon
// triangle
painter.begin().polygon(440, 100, 50, 3, Math.PI).fill().stroke().close();
//rect
painter.begin().polygon(440, 190, 50, 5).fill().stroke().close();
// 5 edges
painter.begin().polygon(440, 300, 50, 6, Math.PI).fill().stroke().close();

let x = 150, y = 100;
// 画笔状态设置
p.ctx({
    lineJoin: 'round',
    strokeStyle: "#666",
    lineWidth: 5,
})
// 封装方法 绘制图标
// 参数：画笔对象、横坐标、纵坐标、缩放比例
home(painter, x, y, 1);
msg(painter, x + 150, y, 1);
email(painter, x + 300, y, 1);
cog(painter, x, y+150, 1)
trash(painter, x+150, y+150, 1);
star(painter, x+300, y+150, 1);

// export image
painter.exportPng();

function home(p, x, y, s){
    p.save().mv(x, y).scale(s, s)
    .begin()
    .polyline(0,-50, -50,0, -40,0, -40,50, 0, 50, 0,20, 20,20, 20,50, 40,50, 40,0, 50,0)
    .close().stroke()
    .restore();
},

function msg (p, x, y, s) {
    p.save().mv(x, y).scale(s,s)
    .begin().mt(-40, -40)
    .lt(40, -40).arcTo(50, -40, 50, -30, 10)
    .lt(50, 10).arcTo(50, 20, 40, 20, 10)
    .lt(40, 20).lt(35, 40).lt(30, 20)
    .lt(-40, 20).arcTo(-50, 20, -50, 10, 10)
    .lt(-50, -30).arcTo(-50, -40, -40, -40, 10)
    .close().stroke()
    .restore();
},

function email (p, x, y, s) {
    p.save().mv(x, y).scale(s,s)
    .begin().mt(-40, -40)
    .lt(40, -40).arcTo(50, -40, 50, -30, 10)
    .lt(50, 10).arcTo(50, 20, 40, 20, 10)
    .lt(-40, 20).arcTo(-50, 20, -50, 10, 10)
    .lt(-50, -30).arcTo(-50, -40, -40, -40, 10)
    .lt(0, -10).lt(40, -40)
    .close().stroke()
    .restore();
},

function cog (p, x, y, s) {
    p.save().mv(x, y).scale(s,s).mt(0, 50);
    let d = Math.PI * 2 / 8;
    for(let i=0;i<8;i++){
    p.rotate(d/3).lt(0, 50)
        .rotate(d/6).lt(0, 35)
        .rotate(d/3).lt(0, 35)
        .rotate(d/6).lt(0, 50)
    } 
    p.close().stroke()
    .begin().arc(0, 0, 16, 0, Math.PI*2).close().stroke()
    .restore();
},

function trash (p, x, y, s) {
    p.save().mv(x, y).scale(s,s)
    .begin().polyline(-50,-50, -35,50, 35,50, 50,-50, -50,-50).close().stroke().lw(2)
    .begin().polyline(-40,-40, -30,30, -20,30, -28,-40).close().stroke()
    .begin().polyline(-16,-40, -10,30, 0,30, -5,-40).close().stroke().lw(5)
    .restore();
},

function star (p, x, y, s) {
    p.save().mv(x, y).scale(s,s)
    .begin().mt(0, -50);
    let d = Math.PI*2/10;
    for(let i=0;i<10;i++){
    if(i%2 === 0){
        p.rotate(d).lt(0, -20)
    }else{
        p.rotate(d).lt(0, -50)
    }
    }
    p.close().stroke().restore();
},