html2canvas不识别边框,html2canvas 实现dashed虚线边框

html2canvas是一个将html元素生成canvas的库，绘制的canvas大部分样式和CSS一致。比如截止1.0.0-alpha.12，虚线边框依然绘制为实线，border-collapse依然有问题。

这里根据github issues里的一个思路，模拟实现了dashed边框效果。

适用情况：单独边框较多，即不是完整边框，同时不考虑border-radius

1、首先，在html2canvas绘制前，找出需要绘制canvas的元素中的所有虚线边框的方向和位置

findDashedBorders = (page) => {

const tds = page.querySelectorAll("td");

const borders = [];

tds.forEach(td => {

const computedStyle = window.getComputedStyle(td);

const borderStyle = computedStyle.borderStyle ? computedStyle.borderStyle.split(' ') : [];

const dashedIndex = findAll(borderStyle, 'dashed');

if (dashedIndex.length) {

const rect = td.getBoundingClientRect();

dashedIndex.map(index => {

const border = {

rect,

border: dashedBorder[index]

}

borders.push(border);

td.style[`border${dashedBorder[index]}Color`] = 'transparent';

});

}

});

return borders;

}

page是需要绘制canvas的元素，我这里有dashed边框的都是td元素，所以查找所有td元素，使用getComputedStyle()方法查找它的borderStyle，如果它有dashed边框，那么这个属性的值的形式为"dashed dashed none none"，所以根据findAll()这个自定义方法找到所有的dashed的方向(比如"dashed dashed none none"将返回[0, 1])，其中dashedBorder数组如下：

const dashedBorder = ["Top", "Right", "Bottom", "Left"];

找到方位后同时获取它的位置，将方向和位置信息存入borders数组，同时将这条边框设为透明，使html2canvas不绘制这条框，我们之后会单独处理。(注意：这个页面的虚线边框都会透明掉，这里并没有考虑绘制完成后将透明边框变回原来的颜色)

2、使用html2canvas得到绘制后的canvas

pages.forEach((page, idx) => {

const borders = this.findDashedBorders(page);

const parentRect = page.getBoundingClientRect();

html2canvas(page, {scale: 2, logging: false, useCORS: true}).then((canvas) => {

this.drawDashedBorder(canvas, borders, parentRect);

......

})

})

pages是需要绘制canvas的所有元素，我们在获取每个page的虚线边框时，同时获取这个page的位置，以便我们绘制dashed边框时得到边框相对于这个页面的位置。待html2canvas绘制canvas后，我们通过drawDashedBorder()方法进一步绘制出dashed边框，下面实现这个方法。

3、drawDashedBorder()在得到canvas后进一步绘制虚线。

drawDashedBorder = (canvas, borders, parentRect) => {

var ctx = canvas.getContext("2d");

ctx.setLineDash([6, 3]);

ctx.strokeStyle = '#3089c7';

ctx.lineWidth = 1;

ctx.globalAlpha = 1;

borders.forEach(border => {

var left = (border.rect.left + 0.5 - parentRect.left)*2;

var right = (border.rect.right - 0.5 - parentRect.left)*2;

var top = (border.rect.top + 0.5 - parentRect.top)*2;

var bottom = (border.rect.bottom - 0.5 - parentRect.top)*2;

switch (border.border) {

case 'Top':

ctx.beginPath();

ctx.moveTo(left, top);

ctx.lineTo(right, top);

ctx.stroke();

break;

case 'Right':

ctx.beginPath();

ctx.moveTo(right, top);

ctx.lineTo(right, bottom);

ctx.stroke();

break;

case 'Bottom':

ctx.beginPath();

ctx.moveTo(left, bottom);

ctx.lineTo(right, bottom);

ctx.stroke();

break;

case 'Left':

ctx.beginPath();

ctx.moveTo(left, top);

ctx.lineTo(left, bottom);

ctx.stroke();

break;

default:

break;

}

})

}

意思就是根据borders里dashed边框的方向和位置信息，在canvas里获取2d上下文后使用setLineDash方法把虚线绘制出来。位置都*2是因为我们之前canvas使用了2倍大小。

4、这个方法目前只在chrome测试可用，firefox无效，因为firefox下getComputedStyle返回的信息和chrome不同。

由于对canvas理解不深无法pr，只能期待html2canvas的官方实现了。

用css实现自定义虚线边框

开发产品功能的时候ui往往会给出虚线边框的效果图,于是乎,我们往往第一时间想到的是用css里的border,可是border里一般就提供两种效果,dashed或者dotted,ui这时就不满意了,说虚 ...

UIView画虚线边框

//fatherView加虚线边框 -(void)boundingRectangleForView:(UIView *)fatherView{ CAShapeLayer *borderLayer = ...

去掉firefox点击按钮时的虚线边框

去掉火狐里面点击按钮时候的虚线边框 button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[t ...

解决IE下a标签点击有虚线边框的问题

解决IE下a标签点击有虚线边框的问题 关键词:IE去除虚线边框.IE解决a标签虚线问题 先看看IE下,a标签出现的虚线边框问题: (上面中,红线包裹的就是一个翻页的按钮,按钮实际是hml的a标签做的, ...

android 用代码画虚线边框背景(转)

1.虚线画效果,可以使用Android中的xml来做. 2.直接上代码:

android 用代码画虚线边框背景

1.虚线画效果,可以使用Android中的xml来做. 2.直接上代码: @drawabl ...

mh

http://video.sina.com.cn/vlist/news/zt/mlxyhkhbsl/#131455718 http://www.cnblogs.com/xinye/archive/20 ...

[转]Native Java Bytecode Debugging without Source Code

link from:http://www.crowdstrike.com/blog/native-java-bytecode-debugging-without-source-code/index.h ...

【LeetCode】22. Generate Parentheses (I thought I know Python...)

I thought I know Python... Actually , I know nothing... 这个题真想让人背下来啊,每一句都很帅!!! Given n pairs of paren ...

TCP协议详解

TCP协议详解 一.TCP协议 1.TCP 通过以下方式提供可靠性: ·  ◆ 应用程序分割为TCP认为最合适发送的数据块.由TCP传递给IP的信息单位叫做报文段. ·  ◆ 当TCP发出一个报文段后 ...

linux下基于rsync + find命令实现文件同步机制

rsync和find是linux系统自带的命令,如果没有安装可以找到系统安装盘或者ISO文件,里面有rpm包,安装一下就可以了.       具体思路如下:             1)可以实现定时进 ...