前端仿ps斜纹布料效果

微信扫一扫,分享到朋友圈

前端仿ps斜纹布料效果

集合 前端蒙版效果 canvas使用脚本画不出图片 vue里想自己获得dom 三个点的demo

起因:偶然发现了一个ps的斜纹格子布绘制教程 查了一下有专门网页版的,叫格子生成器, www.tartanmaker.com/ 可以手动添加格纹,最后以图片形式呈现

查了一些资料,暂时实现了给定底图和蒙版图的基础效果。

css蒙版实现

核心是利用了css3的mask-image,蒙版图黑色部分与彩色图叠加后显色,白色部分过滤。

这个可以理解成【横纹】被处理了,那么如何形成交织感?我给它的父元素设置了一样的宽高,然后加上【竖纹】背景,最终效果:

.element {
width: 285px;
height: 363px;
overflow: hidden;
color: #fff;
background: url(../assets/img/ph.png);
mask-image: url(../assets/mask/mask1.png);
-webkit-mask-image: url(../assets/mask/mask.png);
}
复制代码

canvas实现

canvas可以理解成一个画布,但是不像ps有图层的概念,如果需要修改就必须重新绘制。

这里通过修改canvas中globalCompositeOperation属性,实现图像的混合效果。

一开始畅想直接高仿ps(虽然还没仿成),觉得拿vue更利于组件化,还遇到了vue+canvas的一些小坑

  • vue获取dom元素

vue的一大体验快感就是不用直接操作dom,但不等于放弃直接操作dom,像获取canvas这种时候,就需要ref出场,之后在脚本里使用






t


h


i


s


.


$


r


e


f


.


对应


d


o


m





r


e


f








color{red}{this.$ref.对应dom的ref值}


就可以了。

  • 脚本里给图像src没反应
  1. 首先想到, 浏览器资源加载问题 ,因为直接在html里引入img后,是可以在脚本中绘制到canvas上的,所以第一步,通过onload确保图片加载完成后,在进行绘制操作
  2. 完成第一步后,发现还不行,在 github.com/jiankang-wa… 上找到了解决办法: 使用import将图片导入
drawcanvas() {
let canvas = this.$refs.canvas;
// 获取上下文
this.context = canvas.getContext("2d");
canvas.width = this.canvasWidth;
canvas.height = this.canvasHeight;
// 绘制图像
var img = new Image();
img.src = this.imgsrc;
var mask=new Image();
mask.src=this.masksrc;
setTimeout(() => {
this.context.clearRect(0, 0, canvas.width, canvas.height);
this.context.save();
// 绘制图片
this.context.drawImage(img, 0, 0);
this.context.globalCompositeOperation = "destination-in";
this.context.drawImage(mask, 0, 0);
// this.context.fillStyle = "rgb(63,169,245)";
// this.context.arc(200, 200, 100, 0, Math.PI * 2, true);
// this.context.fill();
this.context.restore();
}, 10);
}
复制代码

遗留问题

实时绘制条形如何实现叠加?考虑将绘制结果生成图片?

利用Data Vault对数据仓库进行建模(二)

上一篇

小白看源码之Vue篇-2:组件化的过程

下一篇

你也可能喜欢

前端仿ps斜纹布料效果

长按储存图像,分享给朋友