小程序开发新能力解读 - 2022.02
快速知悉 图片编辑接口 wx.editImagemap 组件新增能力 - 新增绘制圆弧 - 限制地图显示范围 - polyline 展示文字接口 - map 组件多边形支持设置虚线 camera 支持镜像模式和录像时长参数 1、图片编辑接口 wx.editImage(Object object) 使用介绍：配合 wx.chooseImage 选择图片，对图片进行编辑。 [图片] 示例代码： wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
wx.editImage({
src: tempFilePaths[0], // 演示本地路径，也支持代码包路径
success(res){
console.log("成功")
}
})
}
})
2、map 组件新增能力 2.1 新增绘制圆弧 MapContext.addArc(Object object) 使用介绍：弧线是由一组经纬度点和夹角角度绘制而成，在地图上绘制弧线由 Arc 类定义实现。 [图片] 示例代码： //增加圆弧
addArc() {
const that = this
wx.createSelectorQuery().select('#mapId').context(function(res){
that.mapCtx = res.context// 节点对应的 Context 对象。
}).exec()
this.mapCtx.addArc({
id: 0,
start: {
latitude: 23.099594,
longitude: 203.328520,
},//起点
pass: {
latitude: 53.090994,
longitude: 153.324520,
},//途径点
end: {
latitude: 83.080094,
longitude: 213.321520,
},//终点
// angle: 30,
width: 10,
color: '#ff0000',
complete(res) {
console.log('addArc ', res)
}
})
},
//删除圆弧
removeArc() {
const that = this
wx.createSelectorQuery().select('#mapId').context(function(res){
that.mapCtx = res.context// 节点对应的 Context 对象。
}).exec()
this.mapCtx.removeArc({
id: 0,
complete(res) {
console.log('removeArc ', res)
}
})
},
2.2 限制地图显示范围 MapContext.setBoundary(Object object) 使用介绍：限制地图的显示范围。此接口同时会限制地图的最小缩放整数级别。 [图片] 示例代码： setBoundary() {
const that = this
wx.createSelectorQuery().select('#mapId').context(function(res){
that.mapCtx = res.context// 节点对应的 Context 对象。
}).exec()
this.mapCtx.setBoundary({
southwest: {
latitude: 39.744154,
longitude: 116.124115
},//西南角经纬度
northeast: {
latitude: 40.104336,
longitude: 116.691284,
},//东北角经纬度
complete(res) {
console.log('setBoundary ', res)
}
})
},
2.3 polyline 展示文字接口 使用介绍：在折线线段上面绘制文字，可以用来显示路名。 [图片] 示例代码： textStyle：{
textColor:'#00ff00',//文本颜色
strokeColor:'#00ff00',//描边颜色
fontSize:16//文本大小
},
segmentTexts:[
{
name:"第1段",//名称
startIndex:0,//起点
endIndex:1,//终点
}，
{
name:"第2段",//名称
startIndex:1,//起点
endIndex:2,//终点
}]
官方文档 2.4 map 组件多边形支持设置虚线 使用介绍：[0, 0] 为实线，[10, 10] 表示十个像素的实线和十个像素的空白（如此反复）组成的虚线，默认为 [0, 0] 。 [图片] 示例代码： polygons: [{
points: [{
longitude: 118.082771,
latitude: 24.494959
}, {
longitude: 118.117447,
latitude: 24.486836
},{
longitude: 118.117447,
latitude: 24.486836
}
],
dashArray：[5,5]//边线虚线（数组类型）
}]
官方文档 3、camera 支持镜像模式和录像时长参数 selfieMirror / timeout 3.1镜像模式 使用介绍：拍摄照片或者录像，selfieMirror 设置为 true 时开启镜像。 示例代码： startRecord() {//开始录像
this.ctx = wx.createCameraContext()
this.ctx.startRecord({
selfieMirror:true,//开启镜像模式
success: (res) => {
console.log('startRecord')
}
})
},
takePhoto() {//拍摄照片
this.ctx = wx.createCameraContext()
this.ctx.takePhoto({
quality: 'high',
selfieMirror:true,//开启镜像模式
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
3.2 录制时长参数 使用介绍：开始录像，timeout 是录制时长上限。 示例代码： startRecord() {
this.ctx = wx.createCameraContext()
this.ctx.startRecord({
timeout:30,//录制时长上限
success: (res) => {
console.log('startRecord')
}
})
