开头
今天看到别人用canvas给坤坤变了个颜色，
玩转Canvas——给坤坤变个颜色
按照循环取相近颜色的逻辑。如果坤坤颜色本身是渐变色。那么就无法准确选取了。于是我就想到了通过echarts操作svg来个坤坤变个颜色。
一.使用svg-edit将png变成svg
先准备一个ikun的图片。素材的话。点这里。
打开svg-edit在线网站。点这里
使用impot SVG将png导入。
点击svg画布。将x.y值改成0。将w.h改成图片宽和高。
点击document将画布的大小改成图片的大小。也就是402*402
之后选取Path Tool开始svg轮廓的绘制。这里选择的是画出ikun头发的轮廓。
绘制完成。
点击顶部的svg。保存下来svg代码。
也可以选择save svg将svg文件保留到本地。
二、使用echarts操作svg
使用echarts 庖丁解牛。打开上面的地址。
将上面的svg替换成我们自己的svg.
通过下载本地的svg在浏览器里面打开。找到我们画的头部path部分。
将头部的path加上name=1;然后在data里面写一个name=1;然后就可以操作ikun头部的颜色了。还可以利用echarts的各种特性。
这样就可以改变ikun头发的任何颜色。也可以通过path的绘制改变ikun各个部位的颜色。已经选中事件。
