原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0103/303.html
常州微信小程序开发-canvas绘制地图和简单拖动
class Map {
constructor(canvasId){
this.ctx = wx.createCanvasContext(canvasId);
this.ctx.setLineCap('round');
this.ctx.setLineJoin('round');
this.ctx.setGlobalAlpha(0.2);
let _this = this;
wx.getSystemInfo({
success: function(data) {
_this.ctx.setFillStyle('yellow');
_this.ctx.fillRect(0,0,data.windowWidth,data.windowHeight);
},
fail: function(err) {
console.log(err);
},complete: function(data) {
console.log('complete');
}
})
}
drawPillars(pillarList) {
// this.ctx.beginPath();
this.ctx.setFillStyle('black');
for (let pillar of pillarList) {
this.ctx.fillRect(pillar.x,pillar.y,pillar.width,pillar.height);
}
}
drawPaths (pathList) {
this.ctx.setStrokeStyle('blue');
for (let path of pathList) {
this.ctx.setLineWidth(path.width);
this.ctx.moveTo(path.startX, path.startY);
this.ctx.lineTo(path.endX, path.endY);
this.ctx.stroke();
}
}
setOption(option) {
this.drawPillars(option.pillarList);
this.drawPaths(option.pathList);
this.ctx.draw();
}
}
export default Map;
// pages/map/map.js
// const map = require('../../utils/map.js')
import Map from '../../utils/map.js';
Page({
data:{
x:0,
y:0,
map: null,
option: {
pillarList: [
{
x: 150,
y: 150,
width: 10,
height: 10
},
{
x: 150,
y: 200,
width: 10,
height: 10
}
],
pathList: [
{
startX: 10,
endX: 50,
startY: 250,
endY: 300,
width: 10
},
{
startX: 50,
endX: 100,
startY: 300,
endY: 300,
width: 5
}
]
}
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
// const ctx = wx.createCanvasContext('myCanvas');
// const ctx = map.init('myCanvas');
this.data.map = new Map('myCanvas');
// map.ctx.setFillStyle('red');
// map.ctx.fillRect(10,10,150,75);
// map.ctx.draw();
// let pillarList = [
// {
// x: 150,
// y: 150,
// width: 10,
// height: 10
// },
// {
// x: 150,
// y: 200,
// width: 10,
// height: 10
// }
// ];
// map.drawPillars(pillarList);
// let pathList = [
// {
// startX: 10,
// endX: 50,
// startY: 250,
// endY: 300,
// width: 10
// },
// {
// startX: 50,
// endX: 100,
// startY: 300,
// endY: 300,
// width: 5
// }
// ];
// map.drawPaths(pathList);
// let option = {
// pillarList: pillarList,
// pathList: pathList
// };
this.data.map.setOption(this.data.option);
},
onReady:function(){
// 常州平台运营页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
start: function(e) {
this.setData({
x: e.touches[0].x,
y: e.touches[0].y
})
},
move: function(e) {
let xOffset = e.touches[0].x - this.data.x;
let yOffset = e.touches[0].y - this.data.y;
this.setData({
x: e.touches[0].x,
y: e.touches[0].y
})
console.log(`x:${this.data.x}----y:${this.data.y}`);
console.log(`x:${xOffset}----y:${yOffset}`);
for (let pillar of this.data.option.pillarList) {
pillar.x += xOffset;
pillar.y += yOffset;
}
for (let path of this.data.option.pathList) {
path.startX += xOffset;
path.endX += xOffset;
path.startY += yOffset;
path.endY += yOffset;
}
this.data.map.setOption(this.data.option);
}
})
上篇：上一篇：常州微信小程序开发-app.json 配置
下篇：下一篇：常州微信小程序-顶部提示，canvas，webSocket
