# Zjbcool-Draggable-Texture

生成可拖拽纹理,支持图片、文字,支持以拖拽或UI的方式控制纹理的移动、旋转、缩放,支持重复纹理,支持贴图尺寸适配。

示例1 (opens new window) 示例2 (opens new window)

注意Canvas插件也能实现纹理控制,两者的区别是Canvas提供的拼图更加基础,能实现的功能也更加广泛,控制纹理是其中的一项功能;DraggableTexture插件对控制纹理的实现过程进行了封装,用户不用涉及背后的算法,就能很方便地实现功能。DraggableTexture插件可以使用Canvas插件的save canvas拼图生成的图片。

mark

# create texture

新建一个空的可拖拽纹理,使用原生的replace texture拼图在指定材质上应用此纹理。

# load image

从本地或远程服务器加载图片。使用loaded image拼图接收加载的图片。当图片加载完成后执行'do'插槽中的拼图。

支持原生的texture from text拼图。

# loaded image

已加载的图片。仅在load image拼图的'do'插槽中有效。返回一个Image对象。

# set prop

设置可拖拽纹理的属性,当使用该拼图修改纹理属性时,会自动更新当前纹理。

  • image: 设置纹理的贴图;
  • background: 设置纹理的背景颜色,支持css的输入方式;
  • repeat: 设置贴图的重复模式,默认为'no-repeat',可选值有'no-repeat'|'repeat'|'repeat-x'|'repeat-y'
  • size: 设置贴图尺寸的适配方式,仅在'no-repeat'模式下有效,默认为'contain',可选值有'contain'|'cover'|'orgin'|'fill'

# clear texture

清空当前纹理的贴图。清空后会保持当前背景色。

# start drag texture

开始拖拽纹理。用于when dragged拼图的'start:do'插槽。

# drag texture

拖拽纹理。用于when dragged拼图的'move:do'插槽。

运行该拼图会更新当前纹理,包括贴图和变换。

# drop texture

停止拖拽纹理。用于when dragged拼图的'drop:do'插槽。

# get transform

获取当前纹理的变换(translateX, translateY, rotate, scale)。

# set transform

设置当前纹理的变换(translateX, translateY, rotate, scale)。

使用该拼图可以利用UI的滑块组件控制纹理变换。

# rest transform

重置当前纹理的变换。重置后的各属性值为:

  • translateX:0
  • translateY:0
  • rotate:0
  • scale:1
上次更新: 2021-4-26 13:03:39