|
add
<template>
<div class="container">
<div class="base_map">
<img ref="base_img" id="base_img" src="@/assets/base.png" alt="The Scream" width="100%" height="100%">
<canvas ref="baseCanvas" id="baseCanvas" :width="map_width" :height="map_height" >
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return{
width_milde:0, //宽比例
height_milde:0,//高比例
postion: {
X: 0,
Y: 0
},
baseMapWidth: 0,
baseMapHeight: 0,
baseMapLeft: 0,
baseMapTop: 0,
}
},
computed: {
map_width() {
return document.body.clientWidth - 160;
},
map_height() {
return document.body.clientHeight - 64;
},
},
mounted() {
var vm = this;
var canvas = this.$refs.baseCanvas;
var ctx = canvas.getContext("2d");
// var img = this.$refs.base_img;
var img = new Image();
img.src = require('@/assets/base.png');
console.log('img', img);
let dx, dy, dw, dh, imgRatio, canvasRatio;
canvasRatio = canvas.width / canvas.height;
img.onload = function() {
imgRatio = img.width / img.height;
if(imgRatio <= canvasRatio){
dh = canvas.height
dw = imgRatio * dh
dx = (canvas.width - dw) / 2
dy = 0
}else{
dw = canvas.width
dh = dw / imgRatio
dx = 0
dy = (canvas.height - dh) / 2
}
vm.baseMapWidth = dw;
vm.baseMapHeight = dh;
vm.baseMapLeft = dx;
vm.baseMapTop = dy;
ctx.drawImage(img, dx, dy, dw, dh)
// ctx.drawImage(img, 0, 0);
vm.getPostion();
}
},
methods: {
// initMap(){
// // this.map_width = document.body.clientWidth;
// // this.map_height = document.body.clientHeight;
// },
windowToCanvas(canvas,x,y){
var bbox = canvas.getBoundingClientRect();
return {
x : x - bbox.left*(canvas.width/bbox.width),
y : y - bbox.top*(canvas.height/bbox.height)
};
},
getPostion(){
let vm = this;
var ww = window.innerWidth,wh = window.innerHeight;
var canvas = this.$refs.baseCanvas;
var ctx = canvas.getContext('2d');
var touchMove = 'click';
canvas.addEventListener(touchMove, function(){
var nowpos = vm.windowToCanvas(canvas,event.clientX,event.clientY);
var x=nowpos.x,y=nowpos.y;
if(x < 0 || y < 0){
x = 0;
y = 0;
}
ctx.save();
// ctx.fontStyle='#fff';
// ctx.font='30px Helvetica';
// 设置地图上的标识x和y
// vm.postion.X = parseInt(x * vm.width_milde);
// vm.postion.Y = parseInt(y * vm.height_milde);
vm.postion.X = parseInt(x);
vm.postion.Y = parseInt(y);
// ctx.lineWidth=2;
// ctx.strokeStyle="#000";
// ctx.fillStyle="#FF0000";
// ctx.beginPath();
// ctx.arc(vm.postion.X, vm.postion.Y, 15,0,Math.PI*2,true);
// 鼠标点击处坐标处于底图区域
if((vm.postion.X > vm.baseMapLeft && vm.postion.X < (vm.baseMapLeft + vm.baseMapWidth))
&& (vm.postion.Y > vm.baseMapTop && vm.postion.Y < (vm.baseMapTop + vm.baseMapHeight))) {
console.log('postion', vm.postion.X, vm.postion.Y);
// 相对位置 relative position
var rpX, rpY;
rpX = (vm.postion.X - vm.baseMapLeft) * 100 / vm.baseMapWidth
rpY = (vm.postion.Y - vm.baseMapTop) * 100 / vm.baseMapHeight
// 调用接口存储此坐标
console.log('relative position', rpX, rpY);
var img = new Image();
img.src = require('@/assets/u4.png');
var iconW = 20, iconH, iconX, iconY;
img.onload = function() {
// ctx.drawImage(img, vm.postion.X, vm.postion.Y);
iconH = img.height/(img.width/iconW);
iconX = vm.postion.X - (iconW/2);
iconY = vm.postion.Y - (iconH/2);
ctx.drawImage(img, iconX, iconY, iconW, iconH)
}
}
// ctx.closePath();
// ctx.fill();
// 辅助线
//draw line 1
// ctx.beginPath();
// ctx.moveTo(0,y);
// ctx.lineTo(ww,y);
//draw line 2
// ctx.moveTo(x,0);
// ctx.lineTo(x,wh);
// ctx.closePath();
// ctx.stroke();
// ctx.restore();
},false);
},
// initDeleteIcon(){
// },
},
// watch:{
// //宽改变
// map_width:function(a,v){
// this.width_milde = 1920/a
// //this.initMap();
// this.delete_icon_list = [];
// // this.initDeleteIcon();
// console.log("当前宽比例",1920/a)
// this.initWindow();
// },
// map_height:function(a,v){
// this.height_milde = 1080/a
// //this.initMap();
// this.delete_icon_list = [];
// // this.initDeleteIcon();
// console.log("当前高比例",1080/a)
// this.initWindow();
// }
// },
}
</script>
<style scoped>
.base_map {
margin: 0 auto;
width: calc(100% - 160px);
height: calc(100% - 64px);
position: relative;
}
#base_img {
display: none; object-fit: contain;
}
.right {
position: absolute;
width: 300px;
z-index: 99;
bottom: 0;
right: 0;
}
</style>
view
<template>
<div class="container">
<div class="base_map">
<img ref="base_img" id="base_img" src="@/assets/base.png" alt="The Scream" width="100%" height="100%">
<canvas ref="baseCanvas" id="baseCanvas" :width="map_width" :height="map_height" >
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
</div>
</div>
</template>
<script>
import { pointArray } from '@/utils/point.js'
export default {
name: 'Home',
data(){
return{
width_milde:0, //宽比例
height_milde:0,//高比例
// map_width:0, //宽比例
// map_height:0,//高比例
postion: {
X: 0,
Y: 0
},
baseMapWidth: 0,
baseMapHeight: 0,
baseMapLeft: 0,
baseMapTop: 0,
}
},
computed: {
map_width() {
return document.body.clientWidth;
},
map_height() {
return document.body.clientHeight;
},
},
mounted() {
let vm = this;
var canvas = this.$refs.baseCanvas;
var ctx = canvas.getContext("2d");
// var img = this.$refs.base_img;
var img = new Image();
img.src = require('@/assets/base.png');
console.log('img', img);
let dx, dy, dw, dh, imgRatio, canvasRatio;
canvasRatio = canvas.width / canvas.height;
img.onload = function() {
console.log('img', img.width, img.height);
imgRatio = img.width / img.height;
if(imgRatio <= canvasRatio){
dh = canvas.height
dw = imgRatio * dh
dx = (canvas.width - dw) / 2
dy = 0
}else{
dw = canvas.width
dh = dw / imgRatio
dx = 0
dy = (canvas.height - dh) / 2
}
vm.baseMapWidth = dw;
vm.baseMapHeight = dh;
vm.baseMapLeft = dx;
vm.baseMapTop = dy;
ctx.drawImage(img, dx, dy, dw, dh)
// ctx.drawImage(img, 0, 0);
// 渲染标注
var icon = new Image();
icon.src = require('@/assets/u4.png');
var iconW = 20, iconH, iconX, iconY;
icon.onload = function() {
// ctx.drawImage(icon, vm.postion.X, vm.postion.Y);
iconH = icon.height/(icon.width/iconW);
for (let index = 0; index < pointArray.length; index++) {
const point = pointArray[index];
vm.postion.X = point.rpx * vm.baseMapWidth / 100 + vm.baseMapLeft
vm.postion.Y = point.rpy * vm.baseMapHeight / 100 + vm.baseMapTop
iconX = vm.postion.X - (iconW/2);
iconY = vm.postion.Y - (iconH/2);
console.log('icon postion', iconX, iconY);
ctx.drawImage(icon, iconX, iconY, iconW, iconH)
}
}
}
},
created() {
},
methods: {
initMap(){
// this.map_width = document.body.clientWidth;
// this.map_height = document.body.clientHeight;
},
initDeleteIcon(){
},
},
// watch:{
// //宽改变
// map_width:function(a,v){
// this.width_milde = 1920/a
// //this.initMap();
// this.delete_icon_list = [];
// // this.initDeleteIcon();
// console.log("当前宽比例",1920/a)
// this.initWindow();
// },
// map_height:function(a,v){
// this.height_milde = 1080/a
// //this.initMap();
// this.delete_icon_list = [];
// // this.initDeleteIcon();
// console.log("当前高比例",1080/a)
// this.initWindow();
// }
// },
}
</script>
<style scoped>
.base_map {
width: 100%;
height: 100%;
position: relative;
}
#base_img {
display: none; object-fit: contain;
}
.right {
position: absolute;
width: 300px;
z-index: 99;
bottom: 0;
right: 0;
}
.chart1 {
height: 280px;
}
</style>
export const pointArray = [
{
rpx: 16.55,
rpy: 66.86
},
{
rpx: 62.45,
rpy: 86.51
},
]
目前我只需要新增和显示即可，如需要修改和删除请查阅：
https://blog.csdn.net/u014131617/article/details/88169411
底图适配采用的contain模式，https://www.cnblogs.com/aiontheroad/p/14063041.html介绍了canvas的 drawImage绘图实现contain或cover效果
|