xd-tayde/touchkit

基于mtouch封装的，更便于业务使用的贴纸手势库

Touchkit.js

Example

Git

Download

Introduction

This toolkit is built on mtouch.js and mcanvas.js. Use it, you can build a gesture project quickly and get a image automatically. concerned less and do more!

Installation

• You can download the latest version from the GitHub
• use a npm CDN.
• Or you can install via npm:

npm install touchkit --save

Basic Usage

The idea of touchkit is that init create a touch box firstly, and then use tk.background() add the background and use tk.add() add the touch-element into the touch box, finally, export a composite image by tk.exportImage(). The image is what you see in touch box.

the simple example, see the document for more details.

// init create touch box
new Touchkit('.js-par')

// add background image
// type: contain/crop
// the background-image will place at the bottom of touch-box
.background({
    image:'./images/p2.jpg',
    type:'contain',
})

// add operable element to touch box
.add({
    image:`images/ear.png`,
    width:'100px',
    use:{
        drag:true,
        pinch:true,
        rotate:true,
        singlePinch:true,
        singleRotate:true,
    },
    pos:{
        x:116,
        y:45,
        scale:1.25,
        rotate:2.63,
    },
}).add({
    image:`images/neck.png`,
    width:100,
    limit:true,
    close:true,
    use:'all',
    pos:{
        x:0,
        y:0,
        scale:1,
        rotate:0,
    },
})

// export a image contain all elements what you see in touch box
.exportImage(b64=>{
   console.log(b64);
})

document

Engligh | 中文版

License

MIT

touchkit's Issues

插入自拍的照片出现模糊情况

请问有办法可以避免吗？？

tk.clear 方法可以增加一个可选的参数、用于删除特定的贴纸

现在 tk.clear 方法是全部清空、可以添加一个可选的参数、例如 index 用于删除特定的贴纸。

亲，我可以使用按钮控制图片旋转吗？

场景是这样的，我把图片缩放到合适之后，再把图片移动到合适的位置，此时发现，旋转有点偏差，但是手动调整对于某些机型存在一定难度，我打算加个按钮在界面，然后点击这个按钮，图片可以旋转回角度为0的，请问这个可以实现吗？？？？

横版H5移动图片方向错误

你好，在PC端不能移动图片元素，但是按F12变成移动端就可以移动元素了，为什么呢？有什么办法在PC端也可以移动和缩放

你好，在PC端不能移动图片元素，但是按F12变成移动端就可以移动元素了，为什么呢？有什么办法在PC端也可以移动和缩放

请问可以插入一段文字吗？

想要加一段文字，但是复制粘贴使用
obj.text('hello world',{
width:'300px',
align:'center',
pos:{
x:0,
y:0,
},
})
的时候报错了 obj.text is undefined !!

请问有设置图片透明度的参数吗？

想插入一张半透明的图片，请问支持该操作吗？

touchkit.bakcground在Ios下不支持长度较长的base64

hello,在使用过程中发现个问题哈。使用touchkit.bakcground的时候,image属性设置为较长的base64码的时候，会在ios手机上渲染不出来。具体表现就是在ios上上传大图片后，将image设置成对应的base64会无法渲染。在安卓下没问题。而且当把image换成url链接时就都支持了

导出图片的背景出现底部缺失，怎么搞？

导出图片的背景出现底部缺失，怎么搞？

要是搞个小程序版就好了

目前我测试好像不能在小程序中使用，还是我使用的姿势不对

background添加的图片好像是不支持旋转的，只能拖动。而且拖动的反应很慢。

这个我将想要旋转的背景图片使用add方法添加，因为要解决第一个添加的贴纸为背景而且不能覆盖后加的贴纸，所以我强制将第一个添加的此背景图的z-index设置成50。并且在输出图片前，强制将touchkit._zIndexBox.zIndexArr数组里的'mt-child-0'(第一个加入的贴纸），放在数组最前面。就可以，正常输出合成后的图片了。