Compare commits
No commits in common. 'master' and 'master2' have entirely different histories.
@ -0,0 +1,14 @@
|
|||||||
|
# Windows
|
||||||
|
[Dd]esktop.ini
|
||||||
|
Thumbs.db
|
||||||
|
$RECYCLE.BIN/
|
||||||
|
|
||||||
|
# macOS
|
||||||
|
.DS_Store
|
||||||
|
.fseventsd
|
||||||
|
.Spotlight-V100
|
||||||
|
.TemporaryItems
|
||||||
|
.Trashes
|
||||||
|
|
||||||
|
# Node.js
|
||||||
|
node_modules/
|
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"pages":[
|
||||||
|
"index/index",
|
||||||
|
"map/map"
|
||||||
|
],
|
||||||
|
"window":{
|
||||||
|
"backgroundTextStyle":"light",
|
||||||
|
"navigationBarBackgroundColor": "#fff",
|
||||||
|
"navigationBarTitleText": "Weixin",
|
||||||
|
"navigationBarTextStyle":"black"
|
||||||
|
},
|
||||||
|
"style": "v2",
|
||||||
|
"sitemapLocation": "sitemap.json"
|
||||||
|
}
|
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
@ -0,0 +1,4 @@
|
|||||||
|
.ec-canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
@ -0,0 +1,105 @@
|
|||||||
|
export default class WxCanvas {
|
||||||
|
constructor(ctx, canvasId, isNew, canvasNode) {
|
||||||
|
this.ctx = ctx;
|
||||||
|
this.canvasId = canvasId;
|
||||||
|
this.chart = null;
|
||||||
|
this.isNew = isNew
|
||||||
|
if (isNew) {
|
||||||
|
this.canvasNode = canvasNode;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this._initStyle(ctx);
|
||||||
|
}
|
||||||
|
|
||||||
|
// this._initCanvas(zrender, ctx);
|
||||||
|
|
||||||
|
this._initEvent();
|
||||||
|
}
|
||||||
|
|
||||||
|
getContext(contextType) {
|
||||||
|
if (contextType === '2d') {
|
||||||
|
return this.ctx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// canvasToTempFilePath(opt) {
|
||||||
|
// if (!opt.canvasId) {
|
||||||
|
// opt.canvasId = this.canvasId;
|
||||||
|
// }
|
||||||
|
// return wx.canvasToTempFilePath(opt, this);
|
||||||
|
// }
|
||||||
|
|
||||||
|
setChart(chart) {
|
||||||
|
this.chart = chart;
|
||||||
|
}
|
||||||
|
|
||||||
|
attachEvent() {
|
||||||
|
// noop
|
||||||
|
}
|
||||||
|
|
||||||
|
detachEvent() {
|
||||||
|
// noop
|
||||||
|
}
|
||||||
|
|
||||||
|
_initCanvas(zrender, ctx) {
|
||||||
|
zrender.util.getContext = function () {
|
||||||
|
return ctx;
|
||||||
|
};
|
||||||
|
|
||||||
|
zrender.util.$override('measureText', function (text, font) {
|
||||||
|
ctx.font = font || '12px sans-serif';
|
||||||
|
return ctx.measureText(text);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_initStyle(ctx) {
|
||||||
|
ctx.createRadialGradient = () => {
|
||||||
|
return ctx.createCircularGradient(arguments);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
_initEvent() {
|
||||||
|
this.event = {};
|
||||||
|
const eventNames = [{
|
||||||
|
wxName: 'touchStart',
|
||||||
|
ecName: 'mousedown'
|
||||||
|
}, {
|
||||||
|
wxName: 'touchMove',
|
||||||
|
ecName: 'mousemove'
|
||||||
|
}, {
|
||||||
|
wxName: 'touchEnd',
|
||||||
|
ecName: 'mouseup'
|
||||||
|
}, {
|
||||||
|
wxName: 'touchEnd',
|
||||||
|
ecName: 'click'
|
||||||
|
}];
|
||||||
|
|
||||||
|
eventNames.forEach(name => {
|
||||||
|
this.event[name.wxName] = e => {
|
||||||
|
const touch = e.touches[0];
|
||||||
|
this.chart.getZr().handler.dispatch(name.ecName, {
|
||||||
|
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
|
||||||
|
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
|
||||||
|
});
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
set width(w) {
|
||||||
|
if (this.canvasNode) this.canvasNode.width = w
|
||||||
|
}
|
||||||
|
set height(h) {
|
||||||
|
if (this.canvasNode) this.canvasNode.height = h
|
||||||
|
}
|
||||||
|
|
||||||
|
get width() {
|
||||||
|
if (this.canvasNode)
|
||||||
|
return this.canvasNode.width
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
get height() {
|
||||||
|
if (this.canvasNode)
|
||||||
|
return this.canvasNode.height
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
After Width: | Height: | Size: 76 KiB |
@ -0,0 +1,59 @@
|
|||||||
|
const app = getApp()
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
translateX: 0, // 位移x坐标 单位px
|
||||||
|
translateY: 0, // 位移y坐标 单位px
|
||||||
|
distance: 0, // 双指接触点距离
|
||||||
|
scale: 1, // 缩放倍数
|
||||||
|
rotate: 0, // 旋转角度
|
||||||
|
oldRotate: 0, // 上一次旋转停止后的角度
|
||||||
|
startMove: { // 起始位移距离
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
startTouches: [] // 起始点touch数组
|
||||||
|
},
|
||||||
|
touchStart(e) {
|
||||||
|
const touches = e.touches
|
||||||
|
const { translateX, translateY } = this.data
|
||||||
|
const { pageX, pageY } = touches[0]
|
||||||
|
this.data.startMove = {
|
||||||
|
x: pageX - translateX,
|
||||||
|
y: pageY - translateY
|
||||||
|
}
|
||||||
|
this.data.startTouches = touches
|
||||||
|
},
|
||||||
|
|
||||||
|
touchMove(e) {
|
||||||
|
const touches = e.touches
|
||||||
|
const { pageX: onePageX, pageY: onePageY } = touches[0]
|
||||||
|
const { startMove, scale, distance: oldDistance, startTouches, oldRotate } = this.data
|
||||||
|
if (touches.length === 2 && startTouches.length === 2) {
|
||||||
|
const { pageX: twoPageX, pageY: twoPageY } = touches[1]
|
||||||
|
const distance = Math.sqrt((twoPageX - onePageX) ** 2 + (twoPageY - onePageY) ** 2)
|
||||||
|
let rotate = this.getAngle(touches[0], touches[1]) - this.getAngle(startTouches[0], startTouches[1]) + oldRotate
|
||||||
|
rotate = rotate > 360 ? rotate - 360 : rotate
|
||||||
|
this.data.distance = distance
|
||||||
|
this.setData({
|
||||||
|
scale: scale * (distance / (oldDistance || distance)),
|
||||||
|
rotate
|
||||||
|
})
|
||||||
|
} else if (startTouches.length !== 2) {
|
||||||
|
this.setData({
|
||||||
|
translateX: onePageX - startMove.x,
|
||||||
|
translateY: onePageY - startMove.y
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
touchEnd() {
|
||||||
|
this.data.oldRotate = this.data.rotate
|
||||||
|
},
|
||||||
|
|
||||||
|
getAngle(p1, p2) {
|
||||||
|
const x = p1.pageX - p2.pageX
|
||||||
|
const y = p1.pageY- p2.pageY
|
||||||
|
return Math.atan2(y, x) * 180 / Math.PI
|
||||||
|
}
|
||||||
|
})
|
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
@ -0,0 +1,10 @@
|
|||||||
|
<view style="height: 100vh; width: 100vw">
|
||||||
|
<image
|
||||||
|
src="/image/avatar.png"
|
||||||
|
class="touch-img"
|
||||||
|
style="transform: translate({{translateX}}px, {{translateY}}px) scale({{scale}}) rotate({{rotate}}deg);"
|
||||||
|
catch:touchstart="touchStart"
|
||||||
|
catch:touchmove="touchMove"
|
||||||
|
catch:touchend="touchEnd"
|
||||||
|
/>
|
||||||
|
</view>
|
@ -0,0 +1,5 @@
|
|||||||
|
.touch-img {
|
||||||
|
width: 300rpx;
|
||||||
|
height: 300rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
After Width: | Height: | Size: 146 KiB |
@ -0,0 +1,115 @@
|
|||||||
|
import * as echarts from '../ec-canvas/echarts';
|
||||||
|
|
||||||
|
let chart = null;
|
||||||
|
|
||||||
|
function initChart(canvas, width, height, dpr) {
|
||||||
|
chart = echarts.init(canvas, null, {
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
devicePixelRatio: dpr // new
|
||||||
|
});
|
||||||
|
canvas.setChart(chart);
|
||||||
|
|
||||||
|
var option;
|
||||||
|
let svg='';
|
||||||
|
echarts.registerMap('MacOdrum-LV5-floorplan-web', { svg: svg });
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: 'Visit Route',
|
||||||
|
left: 'center',
|
||||||
|
bottom: 10
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
geo: {
|
||||||
|
map: 'MacOdrum-LV5-floorplan-web',
|
||||||
|
roam: true,
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: undefined
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Route',
|
||||||
|
type: 'lines',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
geoIndex: 0,
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
polyline: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#c46e54',
|
||||||
|
width: 5,
|
||||||
|
opacity: 1,
|
||||||
|
type: 'dotted'
|
||||||
|
},
|
||||||
|
effect: {
|
||||||
|
show: true,
|
||||||
|
period: 8,
|
||||||
|
color: '#a10000',
|
||||||
|
constantSpeed: 80,
|
||||||
|
trailLength: 0,
|
||||||
|
symbolSize: [20, 12],
|
||||||
|
symbol:
|
||||||
|
'path://M35.5 40.5c0-22.16 17.84-40 40-40s40 17.84 40 40c0 1.6939-.1042 3.3626-.3067 5H35.8067c-.2025-1.6374-.3067-3.3061-.3067-5zm90.9621-2.6663c-.62-1.4856-.9621-3.1182-.9621-4.8337 0-6.925 5.575-12.5 12.5-12.5s12.5 5.575 12.5 12.5a12.685 12.685 0 0 1-.1529 1.9691l.9537.5506-15.6454 27.0986-.1554-.0897V65.5h-28.7285c-7.318 9.1548-18.587 15-31.2715 15s-23.9535-5.8452-31.2715-15H15.5v-2.8059l-.0937.0437-8.8727-19.0274C2.912 41.5258.5 37.5549.5 33c0-6.925 5.575-12.5 12.5-12.5S25.5 26.075 25.5 33c0 .9035-.0949 1.784-.2753 2.6321L29.8262 45.5h92.2098z'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
coords: [
|
||||||
|
[110.6189462165178, 456.64349563895087],
|
||||||
|
[124.10988522879458, 450.8570048730469],
|
||||||
|
[123.9272226116071, 389.9520693708147],
|
||||||
|
[61.58708083147317, 386.87942320312504],
|
||||||
|
[61.58708083147317, 72.8954315876116],
|
||||||
|
[258.29514854771196, 72.8954315876116],
|
||||||
|
[260.75457021484374, 336.8559607533482],
|
||||||
|
[280.5277985253906, 410.2406672084263],
|
||||||
|
[275.948185765904, 528.0254369698661],
|
||||||
|
[111.06907909458701, 552.795792593471],
|
||||||
|
[118.87138231445309, 701.365737015904],
|
||||||
|
[221.36468155133926, 758.7870354617745],
|
||||||
|
[307.86195445452006, 742.164737297712],
|
||||||
|
[366.8489324762834, 560.9895157073103],
|
||||||
|
[492.8750778390066, 560.9895157073103],
|
||||||
|
[492.8750778390066, 827.9639780566406],
|
||||||
|
[294.9255269587053, 827.9639780566406],
|
||||||
|
[282.79803391043527, 868.2476088113839]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
chart.setOption(option);
|
||||||
|
return chart;
|
||||||
|
}
|
||||||
|
|
||||||
|
Page({
|
||||||
|
onShareAppMessage: function (res) {
|
||||||
|
return {
|
||||||
|
title: 'ECharts 可以在微信小程序中使用啦!',
|
||||||
|
path: 'map/map',
|
||||||
|
success: function () { },
|
||||||
|
fail: function () { }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
ec: {
|
||||||
|
onInit: initChart
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onReady() {
|
||||||
|
setTimeout(function () {
|
||||||
|
// 获取 chart 实例的方式
|
||||||
|
// console.log(chart)
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {
|
||||||
|
"ec-canvas": "../ec-canvas/ec-canvas"
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,5 @@
|
|||||||
|
<view class="container" style="height: 100vh;">
|
||||||
|
<image src="../map/demo.svg"></image>
|
||||||
|
<ec-canvas id="mychart-dom-map" canvas-id="mychart-map"
|
||||||
|
ec="{{ ec }}" style="height: 603px;"></ec-canvas>
|
||||||
|
</view>
|
@ -0,0 +1,81 @@
|
|||||||
|
$.get(
|
||||||
|
ROOT_PATH + '/data/asset/geo/MacOdrum-LV5-floorplan-web.svg',
|
||||||
|
function (svg) {
|
||||||
|
echarts.registerMap('MacOdrum-LV5-floorplan-web', { svg: svg });
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: 'Visit Route',
|
||||||
|
left: 'center',
|
||||||
|
bottom: 10
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
geo: {
|
||||||
|
map: 'MacOdrum-LV5-floorplan-web',
|
||||||
|
roam: true,
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: undefined
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Route',
|
||||||
|
type: 'lines',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
geoIndex: 0,
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
polyline: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#c46e54',
|
||||||
|
width: 5,
|
||||||
|
opacity: 1,
|
||||||
|
type: 'dotted'
|
||||||
|
},
|
||||||
|
effect: {
|
||||||
|
show: true,
|
||||||
|
period: 8,
|
||||||
|
color: '#a10000',
|
||||||
|
constantSpeed: 80,
|
||||||
|
trailLength: 0,
|
||||||
|
symbolSize: [20, 12],
|
||||||
|
symbol:
|
||||||
|
'path://M35.5 40.5c0-22.16 17.84-40 40-40s40 17.84 40 40c0 1.6939-.1042 3.3626-.3067 5H35.8067c-.2025-1.6374-.3067-3.3061-.3067-5zm90.9621-2.6663c-.62-1.4856-.9621-3.1182-.9621-4.8337 0-6.925 5.575-12.5 12.5-12.5s12.5 5.575 12.5 12.5a12.685 12.685 0 0 1-.1529 1.9691l.9537.5506-15.6454 27.0986-.1554-.0897V65.5h-28.7285c-7.318 9.1548-18.587 15-31.2715 15s-23.9535-5.8452-31.2715-15H15.5v-2.8059l-.0937.0437-8.8727-19.0274C2.912 41.5258.5 37.5549.5 33c0-6.925 5.575-12.5 12.5-12.5S25.5 26.075 25.5 33c0 .9035-.0949 1.784-.2753 2.6321L29.8262 45.5h92.2098z'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
coords: [
|
||||||
|
[110.6189462165178, 456.64349563895087],
|
||||||
|
[124.10988522879458, 450.8570048730469],
|
||||||
|
[123.9272226116071, 389.9520693708147],
|
||||||
|
[61.58708083147317, 386.87942320312504],
|
||||||
|
[61.58708083147317, 72.8954315876116],
|
||||||
|
[258.29514854771196, 72.8954315876116],
|
||||||
|
[260.75457021484374, 336.8559607533482],
|
||||||
|
[280.5277985253906, 410.2406672084263],
|
||||||
|
[275.948185765904, 528.0254369698661],
|
||||||
|
[111.06907909458701, 552.795792593471],
|
||||||
|
[118.87138231445309, 701.365737015904],
|
||||||
|
[221.36468155133926, 758.7870354617745],
|
||||||
|
[307.86195445452006, 742.164737297712],
|
||||||
|
[366.8489324762834, 560.9895157073103],
|
||||||
|
[492.8750778390066, 560.9895157073103],
|
||||||
|
[492.8750778390066, 827.9639780566406],
|
||||||
|
[294.9255269587053, 827.9639780566406],
|
||||||
|
[282.79803391043527, 868.2476088113839]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
);
|
@ -0,0 +1,67 @@
|
|||||||
|
{
|
||||||
|
"description": "项目配置文件",
|
||||||
|
"packOptions": {
|
||||||
|
"ignore": []
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": true,
|
||||||
|
"scopeDataCheck": false,
|
||||||
|
"coverView": true,
|
||||||
|
"es6": false,
|
||||||
|
"postcss": true,
|
||||||
|
"compileHotReLoad": false,
|
||||||
|
"lazyloadPlaceholderEnable": false,
|
||||||
|
"preloadBackgroundData": false,
|
||||||
|
"minified": true,
|
||||||
|
"autoAudits": false,
|
||||||
|
"newFeature": false,
|
||||||
|
"uglifyFileName": false,
|
||||||
|
"uploadWithSourceMap": true,
|
||||||
|
"useIsolateContext": false,
|
||||||
|
"nodeModules": false,
|
||||||
|
"enhance": true,
|
||||||
|
"useMultiFrameRuntime": true,
|
||||||
|
"useApiHook": true,
|
||||||
|
"useApiHostProcess": true,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"packNpmManually": false,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"disableUseStrict": false,
|
||||||
|
"ignoreUploadUnusedFiles": true,
|
||||||
|
"minifyWXML": true
|
||||||
|
},
|
||||||
|
"compileType": "miniprogram",
|
||||||
|
"libVersion": "2.19.0",
|
||||||
|
"appid": "wxa823da2dd800c594",
|
||||||
|
"projectname": "touchMove",
|
||||||
|
"debugOptions": {
|
||||||
|
"hidedInDevtools": []
|
||||||
|
},
|
||||||
|
"scripts": {},
|
||||||
|
"staticServerOptions": {
|
||||||
|
"baseURL": "",
|
||||||
|
"servePath": ""
|
||||||
|
},
|
||||||
|
"isGameTourist": false,
|
||||||
|
"condition": {
|
||||||
|
"search": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"conversation": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"game": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"plugin": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"gamePlugin": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"miniprogram": {
|
||||||
|
"list": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"condition": {
|
||||||
|
"plugin": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"game": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"gamePlugin": {
|
||||||
|
"list": []
|
||||||
|
},
|
||||||
|
"miniprogram": {
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"pathName": "map/map",
|
||||||
|
"query": "",
|
||||||
|
"scene": null,
|
||||||
|
"launchMode": "default"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||||
|
"rules": [{
|
||||||
|
"action": "allow",
|
||||||
|
"page": "*"
|
||||||
|
}]
|
||||||
|
}
|
Loading…
Reference in new issue