搭建简易画板（二）

发表于 2年以前 | 总阅读数：487 次

一、笔刷拓展

现在画板可以绘制图案并生成图片，我们来给线条增加一些花样，例如蜡笔。

第一种方案：自定义算法，即正常绘画的基础上，随机清除掉不定数量不定长宽的小矩形。


function draw(pathInfo, curCtx?: any) {
    let useCtx = curCtx ? curCtx : ctx;
    if (pathInfo.beginX !== null && pathInfo.beginY !== null) {
        const {lastX, lastY, beginX, beginY, strokeStyle, lineWidth, drawType} = pathInfo;
        useCtx.beginPath();
        useCtx.lineCap = 'round';
        useCtx.moveTo(beginX, beginY);
        useCtx.lineTo(lastX, lastY);
        useCtx.strokeStyle = strokeStyle;
        useCtx.lineWidth = lineWidth;
        // 增加粉笔
        if (drawType === "crayon") {
            var length = Math.round(Math.sqrt(Math.pow(lastX - beginX, 2) + Math.pow(lastY - beginY, 2)) / ( 5 / lineWidth));
            var xUnit = (lastX - beginX) / length;
            var yUnit = (lastY - beginY) / length;
            for(var i=0; i<length; i++ ) {
            var xCurrent = beginX + (i * xUnit);
            var yCurrent = beginY + (i * yUnit);
            var xRandom = xCurrent + (Math.random() - 0.5) * lineWidth * 1.2;
            var yRandom = yCurrent+(Math.random() - 0.5) * lineWidth * 1.2;
            useCtx.clearRect( xRandom, yRandom, Math.random() * 2 + 2, Math.random() + 1);
            }
        }
        useCtx.stroke();
        useCtx.closePath();
    }
}

可以看到缓慢速度去绘制的时候，格子清除的较多，快速滑动的时候，格子清除的比较少，算法还是比较简陋，网上有比较成熟的蜡笔算法，例如查看示例。

第二种方案是直接用网上蜡笔的纹理图去叠加线条。如果使用其他域名的图片不要忘记给图片加上跨域 crayonImage.crossOrigin = ''，不然再使用toDataURL等api的时候，浏览器会报画布污染错误。


let crayonImage = new Image();
crayonImage.src = "../images/crayon-bg.png";
crayonImage.onload = () => {
    callback(canvas)
};
function draw(pathInfo, curCtx?: any) {
    let useCtx = curCtx ? curCtx : ctx;
    if (pathInfo.beginX !== null && pathInfo.beginY !== null) {
    const {lastX, lastY, beginX, beginY, strokeStyle, lineWidth, drawType} = pathInfo;
    useCtx.beginPath();
    useCtx.lineCap = 'round';
    useCtx.moveTo(beginX, beginY);
    useCtx.lineTo(lastX, lastY);
    useCtx.strokeStyle = strokeStyle;
    useCtx.lineWidth = lineWidth;
    // 增加粉笔 先画一条用户选中的颜色线条，再加一条蜡笔图片的线条
    if (drawType === "crayon") {
        useCtx.stroke();
        useCtx.strokeStyle = useCtx.createPattern(crayonImage, 'repeat');
    }
    useCtx.stroke();
    useCtx.closePath();
    }
}

同理我们可以画出其他边框图形，大家可以自己试试，有其他方案也可以留言告诉我哈。

二、简易流程图

接下来我们实现一些比较有难度的功能，加一些简易流程图的绘制。

1. 添加矩形

添加矩形的api方式有几种

rect(x,y,width,height) 仅是添加矩形，不会展示，需要再加上一句 ctx.stroke()才能展示
strokeRect(x,y,width,height) 可以直接绘制矩形
也可以使用lineTo方法，根据四角坐标绘制四条线闭合成矩形

// 流程图绘制
function flowDraw(pathInfo, curCtx?: any) {
    let useCtx = curCtx ? curCtx : ctx;
    const {lastX, lastY, beginX, beginY, strokeStyle, lineWidth, drawType, flowType} = pathInfo;
    useCtx.beginPath();
    useCtx.strokeStyle = strokeStyle;
    useCtx.lineWidth = lineWidth;
    if (flowType === 'rect') {
        useCtx.rect(beginX, beginY, lastX - beginX, lastY - beginY);
    }
    useCtx.stroke();
    useCtx.closePath();
}

绘制矩形只需要监听鼠标按下和放开两个节点的坐标即可，在原监听方法下我们增加对绘制流程图的判断，以及在鼠标移开的时候直接调用流程图的绘制函数。

// flowLastPt 记录鼠标按下的节点
function handleMouseDown(event: any) {
    mouseButtonDown = true;
    lastPt = {
        x: event.pageX,
        y: event.pageY
    }
    if (config.flowType) {
        flowLastPt = {
            x: event.pageX,
            y: event.pageY
        }
    }
}
function handleMouseUp(event: any) {
    mouseButtonDown = false;
    lastPt = {x: null, y: null};
    if (config.flowType) {
        let flowPathData = {beginX: flowLastPt.x, beginY: flowLastPt.y, lastX: event.pageX, lastY: event.pageY, strokeStyle: config.strokeStyle, lineWidth: config.lineWidth, drawType: config.drawType, flowType: config.flowType};
        flowDraw(flowPathData)
        pathData.push(flowPathData)
        flowLastPt = {x: null, y: null};
    } else {
        pathData.push(singlePathData)
    }
    singlePathData = [];
    console.log(pathData, 'pathData')
}

由于图像绘制我们用一个数组去记录的当前线条的走向，流程只需要用对象记录下开始和结束的点就好，所以撤销函数也需要进行相应判断。

function undo() {
    pathData.pop();
    let canvasDom: any = document.getElementById('drawCanvas');
    let curCtx = canvasDom!.getContext('2d');
    let rect = canvasDom!.getBoundingClientRect();
    curCtx.clearRect(rect.x, rect.y, rect.width, rect.height);
    pathData.map(item => {
        // 当前对象是数组说明是线条绘画，否则是流程图的绘制
        if (Object.prototype.toString.call(item) === '[object Array]') {
            item.map(info => draw(info, curCtx))
        } else {
            flowDraw(item, curCtx)
        }
    })
}

看下效果，能够正常的展示矩形图，线条等设置，也能够正常的撤销，但是看起来怪怪的，因为不清楚自己的矩形在挪动的过程中到底画了多大，当前样式是什么，我们在移动过程中加上中间态的展示，思路是在body下增加一个dom节点，初始位置top是鼠标的left值，left值是鼠标的top值，然后宽高根据鼠标移动的位置进行绝对值计算，不要忘了将翻转原点设为top,left，当鼠标后续x位置比初始位置小，需要将图像沿y轴反转，y轴位置比初始位置小的时候沿x轴反转。

// 中间状态的绘制
function tempDomDraw(pathInfo) {
    const {lastX, lastY, beginX, beginY, strokeStyle, lineWidth, drawType, flowType} = pathInfo;
    if (flowType === 'rect') {
        tempDom.style.width = Math.abs(lastX - beginX) + 'px';
        tempDom.style.height = Math.abs(lastY - beginY) + 'px';
        tempDom.style.transform = `rotateX(${lastY < beginY ? '-180deg' : 0}) rotateY(${lastX < beginX ? '-180deg' : 0})`
        tempDom.style.border = `${lineWidth}px solid ${strokeStyle}`;
    }
}
function handleMouseDown(event: any) {
    mouseButtonDown = true;
    lastPt = {
        x: event.pageX,
        y: event.pageY
    }
    if (config.flowType) {
        flowLastPt = {
            x: event.pageX,
            y: event.pageY
        }
        tempDom = document.createElement("div");
        tempDom.id = "temp";
        tempDom.style.position = "absolute";
        tempDom.style.transformOrigin= 'left top';
        tempDom.style.top = event.pageY + 'px';
        tempDom.style.left = event.pageX + 'px';
        tempDom.style.boxSizing = 'border-box';
        tempDom.onclick = handleMouseUp; // 鼠标点击的时候经常会点击在新创建的dom节点上，出现粘粘现象，所以需要加上这个函数
        document.body.appendChild(tempDom);
    }
}
function handleMouseMove(event) {
    if (mouseButtonDown && !config.flowType) {
        let singleData = {beginX: lastPt.x, beginY: lastPt.y, lastX: event.pageX, lastY: event.pageY, strokeStyle: config.strokeStyle, lineWidth: config.lineWidth, drawType: config.drawType, flowType: config.flowType};
        singlePathData.push(singleData)
        draw(singleData)
        lastPt = {
            x: event.pageX,
            y: event.pageY
        }
    }
    if (mouseButtonDown && config.flowType) {
        let flowPathData = {beginX: flowLastPt.x, beginY: flowLastPt.y, lastX: event.pageX, lastY: event.pageY, strokeStyle: config.strokeStyle, lineWidth: config.lineWidth, drawType: config.drawType, flowType: config.flowType};
        tempDomDraw(flowPathData)
    }
}

2. 添加文字

同理我们可以在鼠标按下的时候创建input框，监听用户的输入，当回车或者失去焦点的时候保存input里的value值，笔刷里面的颜色和线条宽度同样可以作用到字体设置里。不要忘了把text数据存进数组里，这样撤回重新绘制也可以找到数据。

// flowDraw 函数里增加
if (flowType === 'fillText') {
    useCtx.font = lineWidth + 'px sans-serif';
    useCtx.fillStyle = strokeStyle;
    console.log(useCtx.font)
    useCtx.fillText(fillText, beginX, beginY)
}
// 初始化dom节点增加
if (config.flowType === 'fillText') {
    if (tempDom) return
    tempDom = document.createElement("input");
    tempDom.id = "temp";
    tempDom.style.position = "absolute";
    tempDom.style.top = event.pageY + 'px';
    tempDom.style.left = event.pageX + 'px';
    tempDom.onblur = (e) => {
        tempDom.setAttribute("inputValue", e.target.value)
    };
    document.body.appendChild(tempDom);
}

3. 绘制椭圆

椭圆的绘制api ctx.ellipse 目前只有谷歌支持，所以我们换个思路，先画一个圆，然后把这个圆横向压扁就是一个椭圆了。这里我们需要将画板进行保存然后再释放，因为在canvas设置scale属性会一直生效，需要将它回复原样，另外这里我们是先将路径绘制完成然后还原最后再上色，这样的椭圆是正常的椭圆形状，如果直接上色再进行还原，会发现线条也是被压缩的展示，中间细，两头粗。

if (flowType === 'elipse') {
    let radiusX = Math.abs(lastX - beginX);
    let radiusY = Math.abs(lastY - beginY);
    var r = radiusX > radiusY ? radiusX : radiusY; //用打的数为半径
    var scaleX = radiusX / r; //计算缩放的x轴比例
    var scaleY = radiusY / r; //计算缩放的y轴比例
    useCtx.save(); //保存副本
    useCtx.translate(beginX + radiusX / 2, beginY + radiusY / 2); //移动到圆心位置
    useCtx.scale(scaleX, scaleY); //进行缩放
    useCtx.arc(0, 0, r, 0, Math.PI * 2, Math.PI * 2); //绘制圆形
    useCtx.restore();
}
useCtx.stroke();
useCtx.closePath();

菱形的绘制也是同理，先画一个正方形，然后进行压缩。或者我们跟高端点，用下面绘制箭头的方法来绘制菱形。

4. 绘制箭头

箭头由三条线段组成，AB线条好画，主要在于C，D的坐标我们要如何计算呢。有两个方案，根据线段确定和根据夹角确定，下面的代码是根据夹角进行计算的。

C的坐标xc = xb - L × cos(α-θ)，yc = yd - L × sin(α-θ)。D的坐标xd = xb - L × cos(α+θ)，yd = yd - L × sin(α+θ)。


if (flowType === 'arrow') {

    var l = 20; // 箭头L的长度

    var a = Math.atan2((lastY - beginY), (lastX - beginX));

    var x3 = lastX - l * Math.cos(a + 30 * Math.PI / 180);

    var y3 = lastY - l * Math.sin(a + 30 * Math.PI / 180);

    var x4 = lastX - l * Math.cos(a - 30 * Math.PI / 180);

    var y4 = lastY - l * Math.sin(a - 30 * Math.PI / 180);

    console.log(lastX, lastY, x3, y3, x4, y4, 'lastX, lastY, x3, y3, x4, y4')

    useCtx.moveTo(beginX, beginY);

    useCtx.lineTo(lastX, lastY);

    useCtx.moveTo(x3, y3);

    useCtx.lineTo(lastX, lastY);

    useCtx.lineTo(x4, y4);

}