lookcommon_course/pages_tool/pages/christmasHat/imageeditor/imageeditor.vue

<template>
    <view v-if="!combine">
        <view @touchend="touchEnd" @touchmove="touchMove" @touchstart="touchStart" class="cHcontainer" id="container">
            <image class="bg" :src="bgPic"></image>
            <icon class="cancel" id="cancel" :style="'top:' + (cancelCenterY - 10 + 'px') + ';left:' + (cancelCenterX - 10 + 'px')" type="cancel"></icon>
            <icon class="handle" color="green" id="handle" :style="'top:' + (handleCenterY - 10 + 'px') + ';left:' + (handleCenterX - 10 + 'px')" type="waiting"></icon>
            <image
                class="hat"
                id="hat"
                :src="currentHatSrc"
                :style="
                    'top:' +
                    (hatCenterY - hatSize / 2 - 2 + 'px') +
                    ';left:' +
                    (hatCenterX - hatSize / 2 - 2 + 'px') +
                    ';transform:rotate(' +
                    (rotate + 'deg') +
                    ') scale(' +
                    scale +
                    ')'
                "
            ></image>
        </view>
        <view class="btnContainer">
            <button @tap="combinePic" class="cbtn">确定</button>
        </view>
        <scroll-view class="scrollView" :scrollX="true">
            <image
                v-for="(src, index) in imgList"
                :key="index"
                @tap="chooseImg(index)"
                class="imgList"
                :src="src"
            ></image>
        </scroll-view>
    </view>
</template>

<script>
import hat1 from '../../../images/christmasHat/1.png';
import hat2 from '../../../images/christmasHat/2.png';
import hat3 from '../../../images/christmasHat/3.png';
import hat4 from '../../../images/christmasHat/4.png';
import hat5 from '../../../images/christmasHat/5.png';
import hat6 from '../../../images/christmasHat/6.png';
import hat7 from '../../../images/christmasHat/7.png';
import hat8 from '../../../images/christmasHat/8.png';
import hat9 from '../../../images/christmasHat/9.png';
import hat10 from '../../../images/christmasHat/10.png';
var app = getApp();
export default {
    data() {
        return {
            bgPic: null,
            imgList: [hat1, hat2, hat3, hat4, hat5, hat6, hat7, hat8, hat9, hat10],
            currentHatId: 1,
            currentHatSrc: hat1,
            hatCenterX: uni.getSystemInfoSync().windowWidth / 2,
            hatCenterY: 150,
            cancelCenterX: uni.getSystemInfoSync().windowWidth / 2 - 50 - 2,
            cancelCenterY: 100,
            handleCenterX: uni.getSystemInfoSync().windowWidth / 2 + 50 - 2,
            handleCenterY: 200,
            hatSize: 100,
            scale: 1,
            rotate: 0,
            combine: ''
        };
    },
    onLoad: function () {
		this.bgPic=app.globalData.bgPic;
    },
    onReady: function () {
        this.hat_center_x = this.hatCenterX;
        this.hat_center_y = this.hatCenterY;
        this.cancel_center_x = this.cancelCenterX;
        this.cancel_center_y = this.cancelCenterY;
        this.handle_center_x = this.handleCenterX;
        this.handle_center_y = this.handleCenterY;
        this.scale = this.scale;
        this.rotate = this.rotate;
        this.touch_target = '';
        this.start_x = 0;
        this.start_y = 0;
    },
    methods: {
        touchStart: function (t) {
            if ('hat' == t.target.id) {
                this.touch_target = 'hat';
            } else {
                if ('handle' == t.target.id) {
                    this.touch_target = 'handle';
                } else {
                    this.touch_target = '';
                }
            }
            if ('' != this.touch_target) {
                this.start_x = t.touches[0].clientX;
                this.start_y = t.touches[0].clientY;
            }
        },

        touchEnd: function (t) {
            this.hat_center_x = this.hatCenterX;
            this.hat_center_y = this.hatCenterY;
            this.cancel_center_x = this.cancelCenterX;
            this.cancel_center_y = this.cancelCenterY;
            this.handle_center_x = this.handleCenterX;
            this.handle_center_y = this.handleCenterY;
            this.touch_target = '';
            this.scale = this.scale;
            this.rotate = this.rotate;
        },

        touchMove: function (t) {
            var e = t.touches[0].clientX;
            var a = t.touches[0].clientY;
            var h = e - this.start_x;
            var n = a - this.start_y;
            if ('hat' == this.touch_target) {
				this.hatCenterX=this.hatCenterX + h;
				this.hatCenterY=this.hatCenterY + n;
				this.cancelCenterX=this.cancelCenterX + h;
				this.cancelCenterY=this.cancelCenterY + n;
				this.handleCenterX=this.handleCenterX + h;
				this.handleCenterY=this.handleCenterY + n;
				
            }
            if ('handle' == this.touch_target) {
				this.handleCenterX=this.handleCenterX + h;
				this.handleCenterY=this.handleCenterY + n;
				this.cancelCenterX=2 * this.hatCenterX - this.handleCenterX;
				this.cancelCenterY=2 * this.hatCenterY - this.handleCenterY;
				
                var s = this.handle_center_x - this.hat_center_x;
                var i = this.handle_center_y - this.hat_center_y;
                var r = this.handleCenterX - this.hat_center_x;
                var c = this.handleCenterY - this.hat_center_y;
                var d = Math.sqrt(s * s + i * i);
                var l = Math.sqrt(r * r + c * c);
                var _ = (Math.atan2(i, s) / Math.PI) * 180;
                var o = (Math.atan2(c, r) / Math.PI) * 180;
               
				this.scale=(l / d) * this.scale;
				this.rotate=o - _ + this.rotate;
				
            }
            this.start_x = e;
            this.start_y = a;
        },

        chooseImg: function (index) {
			this.currentHatId = index + 1;
			this.currentHatSrc = this.imgList[index];
        },

        combinePic: function () {
            app.globalData.scale = this.scale;
            app.globalData.rotate = this.rotate;
            app.globalData.hat_center_x = this.hat_center_x;
            app.globalData.hat_center_y = this.hat_center_y;
            app.globalData.currentHatId = this.currentHatId;
            app.globalData.currentHatSrc = this.currentHatSrc;
            uni.navigateTo({
                url: '../combine/combine'
            });
        }
    }
};
</script>
<style>
@import './imageeditor.css';
</style>