边框绘制

src/toCanvas.ts

@@ -67,7 +67,7 @@ export interface RenderOptions {
  */
 export async function toCanvas(data: ICData, options: RenderOptions = {}, callback?: (canvas: HTMLCanvasElement) => void): Promise<HTMLCanvasElement | string> {
 	const {type: exportType = 'png', quality = 0.7} = options
-	let {scale:dpiScale = 1} = options
+	let {scale: dpiScale = 1} = options
 
 	const scale = (window['devicePixelRatio'] || 1) * dpiScale
 
@@ -146,9 +146,15 @@ export async function toCanvas(data: ICData, options: RenderOptions = {}, callba
 				break
 		}
 
-		if (n.host) {
+		if (!n.maskBegin) {
+			let node = n
+			if(n.host){
+				node = n.host
+			}
 			//边框
-			if (n.host.borderWidth) drawBorder(n.host, ctx, scale)
+			if (node.borderWidth) {
+				drawBorder(node, ctx, scale)
+			}
 		}
 
 		if (n.maskEnd) {

test.html

@@ -79,7 +79,8 @@
 			word-wrap: break-word;
 			font-family: Arial;
 			font-style: italic;
-			background-color: red;
+			/*background-color: red;*/
+			border: 1px solid red;
 		}
 	</style>
 
@@ -107,7 +108,7 @@
 <script type="text/babel">
 	ReactDOM.render(
 		<div id="poster" className="poster">
-			<img className="img" src="//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png"/>
+			{/*<img className="img" src="//yun.duiba.com.cn/aurora/14e3d0fa0e1ff54553a2c8c094b1caffd90f0a43.png"/>*/}
 			<div><p className="ppp">hello</p></div>
 		</div>,
 		document.getElementById('app')