PixiJS案例——遮罩涂鸦

幻蝶Love

已于 2022-04-26 10:11:09 修改

阅读量3k

点赞数

分类专栏： PixiJs 文章标签： canvas

于 2019-12-15 16:36:24 首次发布

本文链接：https://blog.csdn.net/xiechao_5800/article/details/103525726

版权

PixiJs 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

简介：

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

思路：

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/

幻蝶Love

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
PixiJS案例——遮罩涂鸦

简介：用不同色彩在固定区域进行涂鸦。思路：1. 使用 pixi.js 构建 canvas；2. 添加需要涂鸦的 png 图片到整个场景；3. 在需要涂鸦的图片上层添加一个可以绘制颜色的几何类，并将它的遮罩设为需要涂鸦的精灵；4. 自由涂鸦即可；素材：1. pixijs版本：5.2.02. 图片：需要一个涂鸦轮廓的图片 1.png。图片就在下面，是一个白色透明...
复制链接

扫一扫