搞定设计在线抠图-小程序画布 canvas

--------

搞定设计在线抠图

------- canvas

画布。

特性名种类默认设置值表明canvas-idString
canvas 组件的唯一标志符disable-scrollBooleanfalse当在 canvas 中挪动时且有关联手式恶性事件时,严禁屏幕翻转和往下拉更新bindtouchstartEventHandle
手指触碰姿势刚开始bindtouchmoveEventHandle
手指触碰后挪动bindtouchendEventHandle
手指触碰姿势完毕bindtouchcancelEventHandle
手指触碰姿势被打断,如拨电话提示,弹窗bindlongtapEventHandle
手指长按 500ms 以后开启,开启了长按恶性事件落后行挪动不会开启屏幕的翻转binderrorEventHandle
当产生不正确时开启 error 恶性事件,detail = {errMsg: something wrong }

注:

canvas标识默认设置宽度300px、高宽比225px

同一网页页面中的canvas-id不能反复,假如应用一个早已出現过的canvas-id,该canvas标识对应的画布将被掩藏其实不再一切正常工作中

示例编码:

 !-- canvas.wxml -- canvas  >
// canvas.jsPage({
 canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg)
 },
 onReady: function (e) { //应用wx.createContext获得制图左右文context
 var context = wx.createCanvasContext( firstCanvas )
 context.setStrokeStyle( #00ff00 )
 context.setLineWidth(5)
 context.rect(0,0,200,200)
 context.stroke()
 context.setStrokeStyle ( #ff0000 )
 context.setLineWidth(2)
 context.moveTo(160,100)
 context.arc(100,100,60,0,2*Math.PI,true)
 context.moveTo(140,100)
 context.arc(100,100,40,0,Math.PI,false)
 context.moveTo(85,80)
 context.arc(80,80,5,0,2*Math.PI,true)
 context.moveTo(125,80)
 context.arc(120,80,5,0,2*Math.PI,true)
 context.stroke()
 context.draw()
 }
})


---------

搞定设计在线抠图

------------

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://ksktrjt.cn/ganhuo/4131.html