PixiJS案例——遮罩涂鸦

简介：

用不同色彩在固定区域进行涂鸦。

思路：

1. 使用 pixi.js 构建 canvas；

2. 添加需要涂鸦的 png 图片到整个场景；

3. 在需要涂鸦的图片上层添加一个可以绘制颜色的几何类，并将它的遮罩设为需要涂鸦的精灵；

4. 自由涂鸦即可；

素材：

1. pixijs版本：5.2.0

2. 图片：需要一个涂鸦轮廓的图片 1.png。图片就在下面，是一个白色透明图；

代码：

<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<meta content="a1z51.23600852" name="spm-id" />
<title>
遮罩涂鸦
</title>
<script src="./lib/zepto.min.js?t=1500513648235"></script>
<script src="./lib/vue.min.js?t=1502325746688"></script>
<script src="./lib/veryless.js?t=1502325746688"></script>
<script src="./lib/pixi.min.js?t=1502325746688"></script>
<style>
html,
body {
position: relative;
height: 100%;
}body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1rem;
color: #000;
margin: 0;
padding: 0;
background-color: rgba(43, 193, 54, 1);
}canvas {
width: 100%;
height: 100%;
}
</style>
</head><body>
<div id="app">
<div class="piximove" id="pixijs"></div>
<button class="test_01" @click="test(1)">黄色</button>
<button class="test_02" @click="test(0)">红色</button>
</div>
<script>
//vue
$(document).ready(() => {
var app = new Vue({
el: "#app",
data() {
return {
frameStage: null, //舞台
color: 0xFF3300,
graphics: null,
dragging: false,
imageSprite: null,
index: 0,
}
},
methods: {
test(index) {
if (this.index != index) {
this.index = index
this.graphics = new PIXI.Graphics();
this.graphics.mask = this.imageSprite;
this.frameStage.stage.addChild(this.graphics);
if (index == 0) this.color = 0xFF3300;
if (index == 1) this.color = 0xecef0a;
}
},
// loader 组件化
pixiLoaderModule(resourceArray, callback) {
let loader = new PIXI.Loader();
loader.defaultQueryString = 'v=' + Math.random();
resourceArray.forEach(item => {
if (item.alias) {
loader.add(item.alias, item.site);
} else {
loader.add(item.site);
}
});
if (callback) loader.load(callback);
},
init(loader, resources) {
let that = this;
// 添加一张图片
let texture = resources.bg.texture;
let imageSprite = new PIXI.Sprite(texture);
this.frameStage.stage.addChild(imageSprite);// 构建一个精灵遮罩
this.imageSprite = new PIXI.Sprite(texture);// 构建一个涂鸦区域
this.graphics = new PIXI.Graphics();
this.graphics.mask = this.imageSprite;
this.frameStage.stage.addChild(this.graphics);// 绑定涂鸦事件
this.frameStage.stage.interactive = true;
// this.frameStage.stage.on('pointerdown', onDragStart);
this.frameStage.stage.on('touchstart', onDragStart);
// this.frameStage.stage.on('pointerup', onDragEnd);
this.frameStage.stage.on('touchend', onDragEnd);
// this.frameStage.stage.on('pointermove', onDragMove);
this.frameStage.stage.on('touchmove', onDragMove);function onDragStart(event) {
console.log("按下:onDragStart");
// console.log("event.data.global", event.data.global);
let newPosition = event.data.global;
that.dragging = true;
that.graphics.beginFill(that.color);
that.graphics.drawCircle(newPosition.x, newPosition.y, 30);
that.graphics.endFill();
}function onDragEnd() {
that.dragging = false;
console.log("抬起:onDragEnd");
}function onDragMove(event) {
if (that.dragging) {
let newPosition = event.data.global;
that.graphics.beginFill(that.color);
that.graphics.drawCircle(newPosition.x, newPosition.y, 30);
that.graphics.endFill();
}
}
},
},
mounted() {
document.getElementById("pixijs").appendChild(this.frameStage.view);
},
created() {
let that = this;
//创建一个 canvas
this.frameStage = new PIXI.Application({
width: 600,
height: 600,
transparent: true, //是否透明
forceCanvas: true //阻止选择WebGL渲染器
});
let resourceArray = [{
'alias': 'bg',
'site': './images/1.png'
}];
this.pixiLoaderModule(resourceArray, this.init)
}})
})
</script><style>
.piximove {
position: absolute;
height: 8rem;
width: 8rem;
left: 1rem;
top: 1rem;
}.test_01 {
position: absolute;
width: 2rem;
height: 1rem;
bottom: 0rem;
left: 0rem;
text-align: center;
font-size: 0.35rem;
/*color: rgba(255,0,0,.8);*/
line-height: 1rem;
background-color: rgba(255, 0, 0, .8);
}.test_02 {
position: absolute;
width: 2rem;
height: 1rem;
bottom: 0rem;
left: 3rem;
text-align: center;
font-size: 0.35rem;
/*color: rgba(255,0,0,.8);*/
line-height: 1rem;
background-color: rgba(255, 0, 0, .8);
}
</style></body></html>

http://123.56.246.193:8080/

PixiJS案例——遮罩涂鸦相关推荐

Unity案例课程 - 涂鸦跳跳 Day 1
1.游戏分析 2.资源导入 3.背景调整 4.图片自适应在platform上添加Adjust脚本,让它自适应相机 using System.Collections; using System.Col ...
PixiJS案例——移动旋转缩放
简介: 对于选择的图片进行,移动.旋转.缩放.使用 hammer.js 做拖拽操作. 思路: 使用pixi创建一个canvas 添加一个需要移动的精灵使用hammer做拖拽.双指旋转和缩放素材: ...
Unity案例课程 - 涂鸦跳跳 Day 2
1.随机生成Tile(一) 在GameManager中添加随机生成砖块和从资源池取出物体的代码 public enum ObjectType {Tile,Item,Coin,Enemy,Bullet ...
Canvas网页涂鸦板再次增强版
目录第一版Canvas涂鸦板第二版Canvas涂鸦板第三版Canvas涂鸦板体验涂鸦板第一版Canvas涂鸦板实现功能:在涂鸦板上鼠标按下去拖动的涂鸦效果实现思路:监听鼠标按下.移动.松 ...
晨山资本王志飏：万物智联时代，智能企业的创新路径
2020 年 11 月 7 日,由边缘计算社区主办的全球边缘计算大会在北京成功召开,作为业内首个专门为边缘计算人打造的行业盛会,此次活动现场共有超过 500+来自政.产.学.研.用各界的企业负责人.权 ...
HTML5 Canvas的简单使用
目录 Canvas教程文档 Canvas的使用 1. Canvas基本绘画 2. Canvas画一个时钟 3. Canvas绘制黑客入侵效果 4. Canvas绘制星星特效 5. Canvas网页涂鸦 ...
ATM Capital 完成首轮募资瞄准东南亚，阿里eWTP科技创新基金为基石投资人...
1月3日消息,风险投资基金ATM Capital 宣布完成首期募资,预计基金总规模2 亿美元.该基金由蝙蝠资本创始合伙人屈田与东南亚手机.物流巨头合作成立,是第一支中国背景.专注于东南亚市场的风投基金 ...
伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3)
伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3) <!DOCTYPE html> <html lang="en"><head>< ...
仿土豆网显示隐藏遮罩案例（HTML、CSS）
仿土豆网显示隐藏遮罩案例(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta ch ...

PixiJS案例——遮罩涂鸦

简介：

思路：

素材：

代码：

PixiJS案例——遮罩涂鸦相关推荐

最新文章

热门文章