作者:阿INK | 来源:互联网 | 2023-07-07 21:42
项目地址项目地址项目地址项目地址项目地址项目地址项目地址项目地址项目地址项目地址整体思路:一张svg矢量图(问:svg怎么导答:让设计给你导一个后缀名是svg的文件)拉到浏览器里面
项目地址项目地址项目地址项目地址项目地址项目地址项目地址项目地址项目地址项目地址
整体思路:一张svg矢量图(问:svg怎么导 答:让设计给你导一个后缀名是svg的文件) 拉到浏览器里面f5检查代码 把svg标签拷贝到html文件里就可以了。每一个色块都应该是单独的path或其他闭合的路径标签,这些都是设计该操心的事情,我们只需要给每一个path加上事件和class,点击事件传对应的class改颜色就行了 ,如果有要关联的色块(点击A色块B色块要跟着一块变)class相同即可。代码如下:
changeColor(name){
if(this.color == ''){
this.$dialog.toast({
mes: '请先选择一个画笔',
timeout: 1500
});
}else{
//把相同class的path都填充颜色
this.domes = document.getElementsByClassName(name)
this.domes.forEach((demo)=>{
demo.style.fill = this.color
})
}
},
点击生成图片用的是html2canvas 把整个svg导成图片