diff --git a/src/plugin/draw/default-option.js b/src/plugin/draw/default-option.js index 9900f57..12d9df7 100644 --- a/src/plugin/draw/default-option.js +++ b/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]; diff --git a/src/plugin/draw/stroke.js b/src/plugin/draw/stroke.js index feb3347..25de012 100644 --- a/src/plugin/draw/stroke.js +++ b/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}; \ No newline at end of file