react-native-sf-sprite

精灵控件,支持移动、放大、旋转、渐变动画,可以拖动

绘制图层,支持绘制线段、连续线段实现画笔功能

安装

• npm install react-native-sf-sprite

IOS

Add the ART.xcodeproj (found in node_modules/react-native/Libraries/ART) to the Libraries group and add libART.a to Link Binary With Libraries under Build Phases.

Props

SFSprite

parameter	type	required	description	default
tag	number	no	标签	0
source	uri/string	yes	图片资源
width	number	yes	图片宽度
height	number	yes	图高度
visible	boolean	no	是否显示	true
canDrag	boolean	no	是否可以拖拽移动	false
rotate	number	no	旋转度(0-360)	0
opacity	number	no	透明度(0-1)	1
x	number	no	坐标x	0
y	number	no	坐标y	0
anchorPointX	number	no	锚点x(0-1)	0.5
anchorPointY	number	no	锚点y(0-1)	0.5
scaleX	number	no	放大倍数x	1
scaleY	number	no	放大倍数y	1
resizeModel	string	no	图片显示模式'cover', 'contain', 'stretch', 'repeat', 'center'	'stretch'
showHitBox	bool	no	是否显示精灵碰撞框	false
showHitBoxColor	string	no	碰撞框颜色	'white'
onPress	func	no	点击事件(tag)	null
onPressIn	func	no	按下事件(tag)	null
onPressOut	func	no	抬起并不在精灵范围内事件(tag)	null
onMoveBegin	func	no	开始移动事件({touchX,touchY,tag})	null
onMove	func	no	移动事件({touchX,touchY,tag)	null
onMoveEnd	func	no	结束移动事件({touchX,touchY,tag)	null

SFDrawLayer

parameter	type	required	description	default
x	number	no	画布x	0
y	number	no	画布y	0
width	number	no	画布宽度	屏幕宽度
height	number	no	画布高度	屏幕高度

Methods

SFSprite

Methods	Params	Param Types	description	Example
reset			重置精灵
setEnable	value	bool	false:不可触发事件
setVisible	value	bool	设置隐藏
setPos	{x:,y:}	dic	设置位置
setPosX	{x:}	dic	设置位置x
setPosY	{y:}	dic	设置位置y
setScale	{x:,y:}		设置放大缩小
setScaleX	{x:}	dic	设置放大缩小x
setScaleY	{y:}	dic	设置放大缩小y
setRotate	{angle:}	dic	设置旋转角度(0-360)
setOpacity	{opacity:}	dic	设置透明度(0-1)
setAnchorPoint	{x:,y:}	dic	设置锚点(0-1)
setAnchorPointX	{x:}	dic	设置锚点x
setAnchorPointY	{y:}	dic	设置锚点y
getVisible	无	无	获取是否显示
getSize	无	无	获取精灵宽高
getPos	无	无	获取精灵位置
getPosX	无	无	获取位置x
getPosY	无	无	获取位置y
getPosRealX	无	无	获取实际位置x(由于锚点不一样,实际位置与显示位置不一样)
getPosRealY	无	无	获取实际位置y(由于锚点不一样,实际位置与显示位置不一样)
getPosReal	无	无	获取实际位置(由于锚点不一样,实际位置与显示位置不一样)
getScale	无	无	获取放大缩小
getScaleX	无	无	获取缩放x
getScaleY	无	无	获取缩放y
getRotate	无	无	获取角度
getOpacity	无	无	获取透明度
getAnchorPoint	无	无	获取锚点
getAnchorPointX	无	无	获取锚点x
getAnchorPointY	无	无	获取锚点y
setHitLines	pointAry,r	array,number	设置碰撞线段,碰撞半径。设置后碰撞后不可以超过线段

SFSprite-Animated (所有动画都需要调用run相应的函数去执行才能生效)

Methods	Params	Param Types	description	Example
moveTo	{x:x, y:y, dur, easing:easing}		移动到指定位置
moveToX	{x:x, dur:dur, easing:easing}		移动到指定位置x
moveToY	{y:y, dur:dur, easing:easing}		移动到指定位置y
rotateTo	{angle:angle, dur:dur, easing:easing}		旋转
fadeIn	{dur:dur, easing:easing}		淡入
fadeOut	{dur:dur, easing:easing}		淡出
scalexTo	{scaleX:scaleX, dur:dur, from:from, easing:easing}		缩放到
scaleyTo	{scaleY:scaleY, dur:dur, from:from, easing:easing}		缩放到
scaleTo		{scaleX:scaleX, scaleY:scaleY, dur:dur, from:from, easing:easing}	缩放到
parallel	aniArray	array	组合平行动画
sequence	aniArray	array	组合顺序动画
run	ani, finish	obj,func	执行单一动画
runParallel	aniAry, finish		同时执行多个动画
runSequence	aniAry, finish, loop = 1		顺序执行多个动画,可重复
stop	无	无	停止动画
runRotateLoop	dur, finish, loop = 1	number,func,number	执行无限旋转动画

SFDrawLayer

Methods	Params	Param Types	description	Example
drawLine	p1, p2, color, size	{x:,y:},{x:,y:},string,number	画线段
drawPathBegin	color, size	string,number	绘制连续线段起始,每次重新绘制都需要调用
drawPath	p	{x:,y:}	绘制连续线段
getLineKB	p1,p2	{x:,y:},{x:,y:}	获取线性函数k,b系数
getPointByLineAndCircle	p1, p2, center, r	{x:,y:},{x:,y:},{x:,y:},number	获取圆与直线的2个交点
setVisible	value	bool	设置是否显示
setLineVisible	value	bool	设置线段是否显示
setPathVisible	value	bool	设置连续线段是否显示

例子

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TouchableWithoutFeedback,
    ScrollView,
    findNodeHandle,
    Dimensions,
    Image
} from 'react-native';
import {SFSprite,SFDrawLayer} from "react-native-sf-sprite"
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

# 动画例子
var obj = this.sp;
var dur = 300;
obj.runSequence([//顺序执行动画
        obj.moveTo({x:width/2-200,y:100,dur:dur}),
        obj.moveTo({x:width/2-100,y:100,dur:dur}),
    ],(tag,finished)=>{//顺序执行结束回调
        obj.runParallel([//同时执行动画
            obj.moveTo({x:width/2,y:50,dur:dur}),
            obj.scaleTo({scaleX:0.5,scaleY:0.5,dur:dur})
        ],(tag,finished)=>{同时执行动画回调
            obj.setScale({x:0.5,y:0.5})
            //旋转动画
            obj.runRotateLoop(dur,()=>{
                obj.run(obj.scaleTo({scaleX:1,scaleY:1,dur:dur}),()=>{
                    obj.setScale({x:1.5,y:1.5});
                    obj.run(obj.moveTo({x:width/2,y:height/2,dur:dur}),()=>{
                        obj.runRotateLoop(300,()=>{},0)
                    })

                })

            },2);
        })

    },1)

//精灵绘制
<SFSprite
    ref={(ref)=> {this.sp = ref}}
    width={100}
    height={100}
    x={width/2}
    y={height/2}
    scaleX={1}
    scaleY={1}
    showHitBox={true}
    canDrag={true}
    onMove={this.onMove}
    onMoveBegin={this.onMoveBegin}
    anchorPointX={0.5}
    anchorPointY={0.5}
    onPress={()=>console.log('onPress')}
    onPressIn={()=>console.log('onPressIn')}
    onPressOut={()=>console.log('onPressOut')}
    source={require('./1.png')}/>


# 绘制例子

<SFDrawLayer ref={(ref)=>{this.draw = ref}}/>

//绘制线段
this.draw.drawLine({x:0,y:0},{x:width,y:height},'black',5);

//绘制连续线段
//在开始移动函数里调用
onMoveBegin = (data) => {
    this.draw.drawPathBegin('white',10);
}
//在移动函数里调用
onMove = (data) => {
    if (this.sp.checkLineIn({px1:0,py1:0,px2:width,py2:100})){//碰撞检测
        console.log('碰到线段')
    }
    //绘制连续线段
    this.draw.drawPath({x:data.touchX,y:data.touchY})
}