小六教你用ReactNative做一个拼图游戏(二) 优化与重布局..

上一篇文章我们一张完整的猫猫图片切割成了零碎的图片

但是我们发现所有的代码都在index.js，这样并不是我们应该去做的事情。

重构

这次我们首先将上次的代码进行重构。

首先我们建立一个js文件，帮助我们处理图片。

import {
    ImageEditor,
    Image,
    Dimensions
} from "react-native";
const WIDTH = Dimensions.get("window").width;
export default class Croper {


    constructor(imageUri) {
        this.imageUri = imageUri;

    }

    /*
     * 方法进行Promise的转化
     * */

    _cropImage(img, cropData) {
        return new Promise(function (resolve, reject) {
            ImageEditor.cropImage(img, cropData, resolve, reject);

        });
    };

    _getSize(img) {
        return new Promise(function (resolve, reject) {
            Image.getSize(img, (width, height) => {
                resolve({width, height})
            }, reject);

        });
    };


    async crop(column, row) {
        //好习惯，首先写返回值
        let result = {};
        //获取图片宽和高
        let {width: imgWidth, height: imgHeight} = await this._getSize(this.imageUri);
        //进行切割 3*3布局
        // 基本功两次循环
        let _column = column;
        let _row = row;
        let _columnWidth = imgWidth / _column;
        let _rowHeight = imgHeight / _row;


        result.width = _columnWidth;
        result.height = _rowHeight;
        result.imageList = [];
        for (let r = 0; r < _row; r++) {
            for (let c = 0; c < _column; c++) {
                let _cropData = {
                    offset: {
                        x: c * _columnWidth,
                        y: r * _rowHeight,
                    },
                    size: {
                        width: _columnWidth,
                        height: _rowHeight,
                    },
                }
                console.log(_cropData.offset.x);
                let uri = await this._cropImage(this.imageUri, _cropData);
                result.imageList.push({
                    uri: uri,
                    width: _columnWidth,
                    height: _rowHeight,
                    fullWidth: WIDTH / _column,
                    fullHeight: (WIDTH / imgWidth) * imgHeight / _row,
                    index: r + c,
                    r: r,
                    c: c,
                });
            }


        }
        return result;
    }
}

注意我们这里返回的结果中，加入了更多属性比如index ，坐标，重新计算后的宽度

然后我们继续处理，这一次我们把图片按照我们想要的进行拼接~

可爱的猫猫又要被我们拼回去了~。

不过这次我们要留下一个最后一个块作为空白快(大家应该都玩过拼图游戏吧)。

然后加上一些黑色的边框，这样更加带感。

按钮

我们添加一些按钮，用于以后操纵拼图游戏

 <View style={{flexDirection: "row"}}>
                    <Button title="↑" onPress={this._move.bind(this, "up")}></Button>
                    <Button title="↓" onPress={this._move.bind(this, "down")}></Button>
                    <Button title="←" onPress={this._move.bind(this, "left")}></Button>
                    <Button title="→" onPress={this._move.bind(this, "right")}></Button>
                </View>

打乱

我们现在需要将之前的图片进行打乱，同时跟他们加上currentIndex标记

//打乱图片  并且加上索引  抠出最后一张图
    _upset(arr) {
        var result = arr;
        var indexList = [];
        for (let i = 0; i < arr.length; i++) {
            indexList.push(i);
        }
        //打乱顺序
        indexList = indexList.sort(function () {
            return (0.5 - Math.random());
        });
        for (let i = 0; i < arr.length; i++) {
            result[i].currentIndex = indexList[i];
            if (indexList[i] == arr.length - 1) {
                result[i].isNull = true;
            }
        }

        return result;
    }

这个时候我们需要将图片显示的函数进行一些调整

 <Image style={{
                                width: img.fullWidth,
                                height: img.fullHeight,
                                position: "absolute",
                                top: parseInt(img.currentIndex / 3) * img.fullHeight,
                                left: img.currentIndex % 3 * img.fullWidth,
                                borderWidth: 1,
                                borderColor: "#000000"
                            }} key={index}
                            source={{uri: img.uri}}/>

完整的代码如下。

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Dimensions,
    ScrollView,
    Text,
    ImageEditor,
    Button,
    Image,
    View
} from 'react-native';
import Croper from "./Croper";
const WIDTH = Dimensions.get("window").width;


const _IMG = "data:image/jpeg;base64,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";


export default class App extends Component<{}> {


    constructor() {
        super();
        this.state = {
            myUrl: {uri: _IMG},
            imgList: [],
        }
        let _this = this;
        let croper = new Croper(_IMG);
        croper.crop(3, 3).then((json) => {


            this._getActBox();
            this.setState({imgList: this._upset(json.imageList)});
        });


        //存放哪些块
        this.actBox = {
            up: {},
            down: {},
            left: {},
            right: {},
        }
    }


    //打乱图片  并且加上索引  抠出最后一张图
    _upset(arr) {
        var result = arr;
        var indexList = [];
        for (let i = 0; i < arr.length; i++) {
            indexList.push(i);
        }
        //打乱顺序
        indexList = indexList.sort(function () {
            return (0.5 - Math.random());
        });
        for (let i = 0; i < arr.length; i++) {
            result[i].currentIndex = indexList[i];
            if (indexList[i] == arr.length - 1) {
                result[i].isNull = true;
            }
        }

        return result;
    }


    _getActBox() {
        var blackBox = this.state.imgList.findIndex((element) => {
            return element == null
        });

    }

    _move(direction) {

    }


    render() {
        return (
            <View style={styles.container}>
                <View style={{flex: 1}}>
                    {this.state.imgList.map((img, index) => {
                        if (img.isNull) return null;
                        return (
                            <Image style={{
                                width: img.fullWidth,
                                height: img.fullHeight,
                                position: "absolute",
                                top: parseInt(img.currentIndex / 3) * img.fullHeight,
                                left: img.currentIndex % 3 * img.fullWidth,
                                borderWidth: 1,
                                borderColor: "#000000"
                            }} key={index}
                                   source={{uri: img.uri}}/>
                        )
                    })}
                </View>
                <View style={{flexDirection: "row"}}>
                    <Button title="↑" onPress={this._move.bind(this, "up")}></Button>
                    <Button title="↓" onPress={this._move.bind(this, "down")}></Button>
                    <Button title="←" onPress={this._move.bind(this, "left")}></Button>
                    <Button title="→" onPress={this._move.bind(this, "right")}></Button>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,

    },
    opView: {},
    canvas: {
        flex: 1
    },


});

丛刻我们就又把猫猫变成完整的猫了~。~

到此为止，我们的准备工作全部做好了，之后我们就开始改造和动画

未完待续。

posted on 2017-10-12 18:02 刘成帅阅读(479) 评论(0) 收藏举报

刷新页面返回顶部

小六教你用ReactNative做一个拼图游戏(二) 优化与重布局..

重构

按钮

打乱

导航

公告