[vue] 11. pixiJS整合vue初体验
1.官方文档地址：https://pixijs.io/examples/#/demos-basic/container.js2.安装方法：npm install --save pixi.js3.示例代码：(pixi 5.1.2)<template><div id="app"><div id="pixi" style="z-index:-1;"></div&
·
1.官方文档地址：
https://pixijs.io/examples/#/demos-basic/container.js
2.安装方法：
npm install --save pixi.js
3.示例代码及其效果：(pixi 5.1.2)
<template>
<div id="app">
<div id="pixi" style="z-index:-1;"> </div>
</div>
</template>
<script>
import logo from '@/assets/logo.png'
import * as PIXI from 'pixi.js'
export default {
data(){
return{
};
},
components: {
},
methods: {
initPixi() {
let app = new PIXI.Application({ width:800,height:600,backgroundColor: 0xEF6644 });
document.getElementById("pixi").appendChild(app.view);
var container=new PIXI.Container();
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
app.stage.addChild(container)//容器加入舞台
for(var i=0;i<7;i++){
var g=new PIXI.Graphics();
g.lineStyle(2, 0xFEEB77, 1);
g.beginFill(0xDE3249)
g.drawRect((i%5)*50, Math.floor(i/5)*50, 50, 50);//x,y,w,h
container.addChild(g)
}
// for(var i=0;i<25;i++){
// var bunny = PIXI.Sprite.from(logo);
// bunny.width=40;//控制精灵大小
// bunny.height=40;
// bunny.anchor.set(0.5);
// bunny.x=(i%5)*40;//控制精灵位置在哪
// bunny.y=Math.floor(i/5)*40;
// container.addChild(bunny)
// //注意是加精灵的类实体进去容器，所以精灵要重新建，否则只有一个
// }
container.pivot.x = container.width / 2; //使得中心点在容器中点，而不是容器左上角
container.pivot.y = container.height / 2;
// Listen for animate update
app.ticker.add(function(delta) {
// just for fun, let's rotate mr rabbit a little
// delta is 1 if running at 100% performance
// creates frame-independent transformation
//container.rotation += 0.01 * delta;
});
}
},
mounted: function() {
this.initPixi();
},
}
</script>4.试试拖拉拽：
<template>
<div id="app">
<div id="pixi" style="z-index:-1;"> </div>
</div>
</template>
<script>
import logo from '@/assets/logo.png'
import logo1 from '@/assets/111.png'
import * as PIXI from 'pixi.js'
let app = new PIXI.Application({ width:800,height:600,backgroundColor: 0xEF6644 });
let none=new PIXI.Texture.from(logo);
let gogo=new PIXI.Texture.from(logo1);
export default {
data(){
return{
ww:80,//每个格子宽
hh:50,//每个格子高
xx:6,//横坐标格子数
yy:7,//纵坐标格子数
gap:10//格子间隔
};
},
components: {
},
methods: {
addBox(){
var x=Math.floor(Math.random()*5)
var y=Math.floor(Math.random()*5)
console.log("gogo"+x+" "+y)
var container=app.stage.getChildAt(0);
container.getChildAt(25+x+y*5).texture=gogo
},
initPixi() {
document.getElementById("pixi").appendChild(app.view);
var container=new PIXI.Container();
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
app.stage.addChild(container)//容器加入舞台
//构造底部网格
for(var i=0;i<this.xx*this.yy;i++){
var g=new PIXI.Graphics();
g.lineStyle(2, 0x000000, 1);
g.beginFill(0xffffff)
g.drawRect((i%this.xx)*this.ww, Math.floor(i/this.xx)*this.hh, this.ww, this.hh);//x,y,w,h
container.addChild(g)
}
//构造中间空Texture
for(var i=0;i<this.xx*this.yy;i++){
var bunny = PIXI.Sprite.from(none);
bunny.width=Math.min(this.ww,this.hh)-this.gap;//控制精灵大小
bunny.height=Math.min(this.ww,this.hh)-this.gap;
bunny.x=(i%this.xx)*this.ww+this.ww/2-bunny.width/2;//精灵位置，居中
bunny.y=Math.floor(i/this.xx)*this.hh+this.hh/2-bunny.height/2;
bunny.interactive = true;
bunny.buttonMode = true;
//bunny.anchor.set(0.5);
//bunny.on('pointerdown',()=>{ console.log("???"+this.x+" "+this.y);this.texture = gogo;});
bunny.on('pointerdown',onDragStart)
.on('pointerup',onDragEnd)
.on('pointerupoutside',onDragEnd)
.on('pointermove', onDragMove);
function onDragStart(event){
// store a reference to the data
// the reason for this is because of multitouch
// we want to track the movement of this particular touch
this.data = event.data;
this.alpha = 0.5;
this.dragging = true;
this.texture = gogo;
this.orix=this.x
this.oriy=this.y
}
var that=this
function onDragEnd() {
this.alpha = 1;
this.dragging = false;
// set the interaction data to null
console.log("x:"+this.x+" y:"+this.y+"::"+that.ww+" "+that.hh+":: "+this.width+" "+this.height)
this.texture=none
//根据格子xy嵌合
if(this.x<=that.xx*that.ww&&this.x>=0&&this.y<=that.yy*that.hh&&this.y>=0){
this.x=Math.floor(this.x/that.ww)*that.ww+that.ww/2-this.width/2;
this.y=Math.floor(this.y/that.hh)*that.hh+that.hh/2-this.height/2;
console.log("after x:"+this.x+" y:"+this.y)
}
//判断是否已经有格子了
var container=app.stage.getChildAt(0);
var tm=0
for(var i=0;i<that.xx*that.yy;i++){
var t=container.getChildAt(that.xx*that.yy+i)
if(t.x==this.x&&t.y==this.y){
tm++;
if(tm==2){
this.x=this.orix
this.y=this.oriy
console.log("已经有格子了:"+this.data.x)
break;
}
}
}
this.data = null;
}
function onDragMove() {
if (this.dragging) {
const newPosition = this.data.getLocalPosition(this.parent);
this.x = newPosition.x;
this.y = newPosition.y;
}
}
container.addChild(bunny)
//boxes.push(bunny)
}
container.pivot.x = container.width / 2; //使得中心点在容器中点，而不是容器左上角
container.pivot.y = container.height / 2;
//构造按钮
var button=new PIXI.Sprite.from(logo)
button.x=app.screen.width-100;
button.y=app.screen.height-100;
button.height=50;
button.width=50;
button.buttonMode = true;
button.interactive = true;
button.on('pointerdown',this.addBox);//绑定按钮事件与触发事件
app.stage.addChild(button)
// Listen for animate update
app.ticker.add(function(delta) {
// just for fun, let's rotate mr rabbit a little
// delta is 1 if running at 100% performance
// creates frame-independent transformation
//container.rotation += 0.01 * delta;
});
}
},
mounted: function() {
this.initPixi();
},
}
</script>5.一个封装较好的拖拉拽，有个经验，看图
<template>
<div id="app">
<div id="pixi" style="z-index:-1;"> </div>
</div>
</template>
<script>
import logo from '@/assets/logo.png'
import logo1 from '@/assets/111.png'
import * as PIXI from 'pixi.js'
let app = new PIXI.Application({ width:1500,height:1500,backgroundColor: 0xffffff });
let none=new PIXI.Texture.from(logo);
let gogo=new PIXI.Texture.from(logo1);
export default {
data(){
return{
ww:80,//每个格子宽
hh:80,//每个格子高
numx:6,//横坐标格子数
numy:7,//纵坐标格子数
gap:10//格子间隔
};
},
components: {
},
methods: {
addslot(){
var x=Math.floor(Math.random()*5)
var y=Math.floor(Math.random()*5)
console.log("gogo"+x+" "+y)
var container=app.stage.getChildAt(0);
container.getChildAt(25+x+y*5).texture=gogo
},
initPixi() {
document.getElementById("pixi").appendChild(app.view);
var container=new PIXI.Container();
container.x = 100;
container.y = 200;
app.stage.addChild(container)//容器加入舞台
//文字样式
var style = {
fontFamily: 'Arial',
fontSize: '12px',
//fontStyle: 'italic',
fontWeight: 'bold',
fill: '#000000',
// stroke: '#4a1850',
// strokeThickness: 5,
//dropShadow: true,
//dropShadowColor: '#000000',
//dropShadowAngle: Math.PI / 6,
//dropShadowDistance: 6,
wordWrap: true, //是否允许换行
wordWrapWidth: 120, //换行执行宽度
breakWords: true //支持中文
}
//构造底部网格bottom
var bottom=new PIXI.Container();
bottom.x=0
bottom.y=0
for(var i=0;i<this.numx*this.numy;i++){
var g=new PIXI.Graphics();
g.lineStyle(2, 0x000000, 1);
g.beginFill(0xffffff)
g.drawRect((i%this.numx)*this.ww, Math.floor(i/this.numx)*this.hh, this.ww, this.hh);//x,y,w,h
bottom.addChild(g)
}
container.addChild(bottom)
//构造middle容器
var middle=new PIXI.Container()
middle.x=600
middle.y=0
for(var i=0;i<this.numx*this.numy;i++){
//构造middle的子容器slot
var slot=new PIXI.Container();
slot.x=(i%this.numx)*this.ww;
slot.y=Math.floor(i/this.numx)*this.hh
slot.interactive=true;
slot.buttonMode=true;
slot.on('pointerdown',onDragStart)
.on('pointerup',onDragEnd)
.on('pointerupoutside',onDragEnd)
.on('pointermove', onDragMove);
//子容器成员：边框
var g=new PIXI.Graphics()
g.lineStyle(2, 0x000000, 1);
g.beginFill(0xffffff)
g.drawRect(0, 0, this.ww, this.hh);//x,y,w,h
slot.addChild(g)
//子容器成员：文字
style.wordWrapWidth=this.ww-30
var richText = new PIXI.Text('带自定义效d果文本a',style);
richText.x=0;//子容器成员坐标相对于子容器坐标
richText.y=0;
slot.addChild(richText)
function onDragStart(event){
//事件中的this相当于event.currentTarget
this.diff = {x:event.data.global.x-this.x-container.x-this.parent.x,y:event.data.global.y-this.y-container.y-this.parent.y};//解决拖拽时的坐标问题
this.data = event.data;
this.alpha = 0.5;
this.dragging = true;
this.startpos={x:this.x,y:this.y};//初始坐标存起来
console.log("开始坐标 x:"+this.x+" y:"+this.y+"误差坐标："+this.diff.x+" "+this.diff.y+" 全局坐标："+event.data.global.x+" "+event.data.global.y)
}
var that=this
function onDragEnd() {
this.alpha = 1;
this.dragging = false;
console.log("当前坐标 x:"+this.x+" y:"+this.y)
//根据格子xy嵌合
var dist={x:middle.x-bottom.x,y:middle.y-bottom.y};
if(this.x+dist.x<=that.numx*that.ww
&&this.x+dist.x>=0
&&this.y+dist.y<=that.numy*that.hh
&&this.y+dist.y>=0){
this.x=Math.floor((this.x+this.diff.x+(middle.x-that.numx*that.ww))/that.ww)*that.ww-(middle.x-that.numx*that.ww);
this.y=Math.floor((this.y+this.diff.y)/that.hh)*that.hh-0;
console.log("最后坐标 x:"+this.x+" y:"+this.y)
}
//判断是否已经有格子了
var tm=0
for(var i=0;i<that.numx*that.numy;i++){
var t=middle.getChildAt(i)
if(t.x==this.x&&t.y==this.y){
tm++;
if(tm==2){
this.x=this.startpos.x
this.y=this.startpos.y
console.log("已经有格子了:"+this.data.x)
break;
}
}
}
this.data = null;
}
function onDragMove() {
if (this.dragging) {
const newPosition = this.data.getLocalPosition(this.parent);
this.x = newPosition.x-this.diff.x;
this.y = newPosition.y-this.diff.y;
console.log("移动坐标 x:"+this.x+" y:"+this.y)
}
}
// slot.addChild(bunny)
middle.addChild(slot)
//slotes.push(bunny)
}
container.addChild(middle)
//container.pivot.x = container.width / 2; //使得中心点在容器中点，而不是容器左上角
//container.pivot.y = container.height / 2;
//构造按钮
var button=new PIXI.Sprite.from(logo)
button.x=app.screen.width-100;
button.y=app.screen.height-100;
button.height=50;
button.width=50;
button.buttonMode = true;
button.interactive = true;
button.on('pointerdown',this.addslot);//绑定按钮事件与触发事件
app.stage.addChild(button)
// Listen for animate update
app.ticker.add(function(delta) {
// just for fun, let's rotate mr rabbit a little
// delta is 1 if running at 100% performance
// creates frame-independent transformation
//container.rotation += 0.01 * delta;
});
}
},
mounted: function() {
this.initPixi();
},
}
</script>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)