commit
496e2ec9f5
@ -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