feat: cnchar-draw

src/plugin/draw/default-option.js

@@ -60,19 +60,7 @@ function merge (args) {
             }
         }
     });
-    check(json, [
-        'length',
-        'padding',
-        'lineStraight',
-        'lineCross',
-        'lineWidth',
-        'lineColor',
-        'lineDash',
-        'border',
-        'borderWidth',
-        'borderColor',
-        'borderDash'
-    ]);
+    check(json);
 
     json.width = json.length;
     json.height = json.length;
@@ -80,6 +68,7 @@ function merge (args) {
 }
 
 function check (json, attrs) {
+    attrs = attrs || Object.keys(Option);
     attrs.forEach(attr => {
         if (isUd(json[attr])) {
             json[attr] = Option[attr];

src/plugin/draw/stroke.js

@@ -11,21 +11,26 @@ let HanziWriter = require('./hanzi-writer');
 //     strokeColor: '#555',
 // }
 function stroke (writer, cloneSvg) {
-    let w = writer.option.width;
     writer.text.forEach((s) => {
-        let div = document.createElement('div');
-        writer.el.appendChild(div);
+        let target = document.createElement('div');
+        writer.el.appendChild(target);
         HanziWriter.loadCharacterData(s).then(function (charData) {
             for (var i = 0; i < charData.strokes.length; i++) {
-                var strokesPortion = charData.strokes.slice(0, i + 1);
-                renderFanningStrokes(div, strokesPortion, cloneSvg, w);
+                renderFanningStrokes({
+                    option: writer.option,
+                    target,
+                    strokes: charData.strokes,
+                    current: i,
+                    cloneSvg,
+                    width: writer.option.width
+                });
             }
         });
     });
 }
 
 
-function renderFanningStrokes (target, strokes, cloneSvg, width) {
+function renderFanningStrokes ({option, target, strokes, cloneSvg, current, width}) {
     var svg = cloneSvg();
     target.appendChild(svg);
     var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
@@ -34,14 +39,23 @@ function renderFanningStrokes (target, strokes, cloneSvg, width) {
     var transformData = HanziWriter.getScalingTransform(width, width);
     group.setAttributeNS(null, 'transform', transformData.transform);
     svg.appendChild(group);
-  
-    strokes.forEach(function (strokePath) {
-        var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttributeNS(null, 'd', strokePath);
-        // style the character paths
-        path.style.fill = '#555';
-        group.appendChild(path);
-    });
+    for (let i = 0; i <= current; i++) {
+        let color = (i === current && option.currentColor) ? option.currentColor : option.strokeColor;
+        renderPath(strokes[i], group, color);
+    }
+    if (option.showOutline && current + 1 <= strokes.length) {
+        for (let i = current + 1; i < strokes.length; i++) {
+            renderPath(strokes[i], group, option.outlineColor);
+        }
+    }
+}
+
+function renderPath (strokePath, group, color) {
+    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttributeNS(null, 'd', strokePath);
+    // style the character paths
+    path.style.fill = color;
+    group.appendChild(path);
 }
 
 module.exports = {stroke};