PixiJS案例——移动旋转缩放

最新推荐文章于 2022-05-16 16:13:37 发布

幻蝶Love

最新推荐文章于 2022-05-16 16:13:37 发布

阅读量3.6k

点赞数 3

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

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

版权

PixiJs 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

简介：

对于选择的图片进行，移动、旋转、缩放。使用 hammer.js 做拖拽操作。

思路：

使用pixi创建一个canvas
添加一个需要移动的精灵
使用hammer做拖拽、双指旋转和缩放

素材：

对应的JS库 pixi.js hammer.js
任意一张图片

代码：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta content="a1z51.23600852" name="spm-id" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>
		图片操作
	</title>
	<script src="./lib/zepto.min.js?t=1"></script>
	<script src="./lib/vue.min.js?t=1"></script>
	<script src="./lib/veryless.js?t=1"></script>
	<script src="./lib/pixi.min.js?t=1"></script>
	<script src="./lib/hammer.js?t=1"></script>
	<script src="./lib/vconsole.min.js"></script>
	<style>
		html,
		body {
			position: relative;
			height: 100%;
		}

		body {
			background: #eee;
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			font-size: 1rem;
			color: #000;
			margin: 0;
			padding: 0;
		}

		canvas {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<div id="app">
	    <div class="title_name">PIXI 拖拽旋转缩放</div>
		<div class="piximove" id="pixijs"></div>
		<div class="my_img">
			<img style="width: 2rem;height: 2rem;" :src="imageData">
		</div>
		<button class="test_01" @click="addA()">切换图片</button>
		<button class="test_02" @click="addB()">导出Base64</button>
	</div>
	<script>
		//vue
		$(document).ready(() => {
			var app = new Vue({
				el: "#app",
				data() {
					return {
						frameStage: null, // 舞台
						drawSprite: null, // 拖拽元素
						imageData: '', // 图片
					}
				},
				methods: {
					test() {

					},
					addA() {
						this.drawSprite.texture = PIXI.Texture.fromImage('images/1.png');
					},
					addB() {
						this.imageData = this.frameStage.view.toDataURL("image/png");
						console.log(this.imageData.length);
					},

				},
				mounted() {
					// 创建一个Application，设置长宽
					this.frameStage = new PIXI.Application({
						width: 600,
						height: 600,
						// backgroundColor: 0x55FF55,
						transparent: true, //是否透明
						antialias: true, //设置抗锯齿
						// forceCanvas: true //阻止选择WebGL渲染器
						preserveDrawingBuffer: true 
					});

					// 将舞台添加到DOM元素中
					document.getElementById("pixijs").appendChild(this.frameStage.view);

					// 设置需要拖拽的元素
					this.drawSprite = PIXI.Sprite.fromImage('images/0.png');
					this.drawSprite.anchor.set(0.5);
					this.drawSprite.x = 300;
					this.drawSprite.y = 300;
					this.frameStage.stage.addChild(this.drawSprite);

					// 拖拽事件
					const app = document.querySelector('#pixijs');
					const mc = new Hammer(app);
					mc.get('pinch').set({
						enable: true
					});
					mc.get('rotate').set({
						enable: true
					});
					// 移动
					let draw_x = 0;
					let draw_y = 0;
					mc.on('panstart', ev => {
						draw_x = this.drawSprite.x;
						draw_y = this.drawSprite.y;
					});
					mc.on('panmove', ev => {
						// 限制不能移动出去
						this.drawSprite.x = draw_x + ev.deltaX;
						this.drawSprite.y = draw_y + ev.deltaY;
					});

					// 旋转
					let draw_r = 0;
					let m_r = 0;
					mc.on('rotatestart', ev => {
						draw_r = this.drawSprite.rotation;
						m_r = ev.rotation;
					});
					mc.on('rotatemove', ev => {
						this.drawSprite.rotation = draw_r + (ev.rotation - m_r) / 180 * Math.PI;
					});

					// 缩放
					let draw_s = 1;
					let draw_sn = 1;
					mc.on('pinchmove', ev => {
						draw_sn = ev.scale * draw_s;
						// 限制放大缩小比例
						draw_sn = draw_sn >= 5 ? 5 : (draw_sn <= 0.2 ? 0.2 : draw_sn);
						this.drawSprite.scale.set(draw_sn);
					});
					mc.on('pinchend', ev => {
						draw_s = draw_sn;
					})
				}

			})
		})
	</script>

	<style>
		.piximove {
			position: absolute;
			height: 8rem;
			width: 8rem;
			left: 1rem;
			top: 1rem;
			border: #000 solid 1px;
		}
		.my_img{
			position: absolute;
			height: 2rem;
			width: 2rem;
			left: 1rem;
			top: 10rem;
			background-color: rgba(255, 255, 0, .8);
			border: #000 solid 1px;
		}

		.test_01 {
			position: absolute;
			width: 2rem;
			height: 1rem;
			bottom: 0rem;
			left: 0rem;
			text-align: center;
			font-size: 0.3rem;
			/*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.3rem;
			/*color: rgba(255,0,0,.8);*/
			line-height: 1rem;
			background-color: rgba(255, 255, 0, .8);
		}

		.title_name {
			position: absolute;
			width: 10rem;
			height: 1rem;
			left: 0;
			top: 0;
			background-color: rgba(255, 255, 255, 0.2);
			font-size: 0.3rem;
			line-height: 1rem;
			text-align: center;
		}
	</style>

</body>

</html>