图片热区阴影遮罩 area

临近年末，项目也少了，闲来无事回顾了一下以前的项目，顺便也学习一下前端，作为一个后端开发人员，以前也写过一些jsp，现在前后端分离了，咱也来前端瞧瞧，凑凑热闹 O(∩_∩)O哈哈~。
回顾了一下以前的一个项目，有一个需求显示一个电子报，点击电子报的某一个板块，显示该板块的详细内容，然而当时并没有采用canvas来绘制阴影，导致只能显示一些矩形的阴影有些多边形的阴影并没有很好的显示出来，所以尝试了一下使用canvas来绘制我们图片热区 map_area 中的rect circle poly，尝试的结果如下

尽管前端知识有些缺乏，代码写的有些丑陋，我还是把它丢出来让大家来瞧瞧，希望大家多多指正，我好把它改一改。封装了一个vue

hotspot-shadow.vue

<template><div class="wrapper" style="position: relative"><div><img:src="imgUrl"usemap="#netmap":alt="imgAlt":height="imgHeight + 'px'":width="imgWidth + 'px'"ref="img"/><map name="netmap" id="netmap"><areav-for="(area, index) in areas":key="index":shape="area.type":coords="area.coord":title="area.dhref"alt=""@mouseover="showShadow($event)"/></map></div><divstyle="position: absolute;top: 0;left: 0;display: none;cursor: pointer;"id="shadowDiv"><canvas:width="canvasWidth":height="canvasHeight"id="myCanvas"@mouseout="hiddenDiv"@mousemove="jugeInShadow($event)"@click="openHref($event)">您的浏览器不支持 HTML5 canvas 标签。</canvas></div></div>
</template><script>
export default {components: {},props: {/**说明如下：openType：热区连接内容打开方式，window.open() 中的name,  值可以是blank（新窗口打开） 或者 self（替换当前页面），其他值也没做限制shadowColor： 阴影部分的颜色 默认为粉色 不透明度 0.5 当然你也可以改imgUrl：热区图片的地址 本地图片传参需要加一个 require（"./1.jpg"）imgAlt: 图片的文本替换内容imgHeight：图片的高宽（注意这个值与 area 中的coord 值息息相关，如果变了则coord的值也要变）想做一个缩放参数的，由于没有时间就不做了imgWeight：图片的高宽（注意这个值与 area 中的coord 值息息相关）  areas 是个数组 每个元素是一个对象格式如下{type:"rect" | "circle" | "poly"coord:"100,100,200,200"href:"www.baidu.com" //这里是一个链接  window.open 打开该链接 }*/openType: {type: String,default: "blank",},shadowColor: {type: String,default: "rgba(255,220,220,0.5)",},imgUrl: {type: String,default: "",},imgAlt: {type: String,default: "",},imgHeight: {type: String,default: 800,},imgWidth: {type: String,default: 550,},areas: {type: Array,default() {return [];},},},created() {if (this.imgWidth !== 550) {this.widthRate = (this.imgWidth / 550).toFixed(2);}if (this.imgHeight !== 800) {this.heightRate = (this.imgHeight / 800).toFixed(2);}this.areas.forEach((item) => {if (item.type == "poly" || item.type == "rect") {let coordinate = item.coord.split(",");let coord = "";for (let i = 0; i < coordinate.length; i++) {if (i % 2 == 0) {coordinate[i] *= this.widthRate;} else {coordinate[i] *= this.heightRate;}coord += coordinate[i] + ",";}coord = coord.substr(0, coord.length - 1);item.coord = coord;} else if (item.type == "circle") {let coordinate = item.coord.split(",");coordinate[0] *= this.widthRate;coordinate[1] *= this.heightRate;coordinate[2] *= this.widthRate;item.coord = coordinate[0] + "," + coordinate[2] + "," + coordinate[2];}});this.canvasWidth *= this.widthRate;this.canvasHeight *= this.heightRate;},mounted() {this.relativePosX = this.$refs.img.getBoundingClientRect().x;this.relativePosY = this.$refs.img.getBoundingClientRect().y;},data() {return {relativePosX: 0,relativePosY: 0,heightRate: 1,widthRate: 1,// canvas画布的宽度canvasWidth: 400,// canvas画布的高度canvasHeight: 200,// 所在阴影的链接 每次移动到阴影上都会修改shadowHref: "",};},methods: {hiddenDiv() {// 移出 遮罩的div 则隐藏遮罩的divlet e = document.getElementById("shadowDiv");e.style.display = "none";},openHref(event) {// 在阴影中点击打开链接let e = document.getElementById("shadowDiv");let c = document.getElementById("myCanvas");let ctx = c.getContext("2d");let xmin = e.style.left.replace("px", "");let ymin = e.style.top.replace("px", "");// 通过 canvas的isPointInPath 来判断点击的位置  是在绘制的图形上  而不只是在canvas的画布上if (ctx.isPointInPath(event.pageX - this.relativePosX - xmin,event.pageY - this.relativePosY - ymin)) {//在则打开新链接// 这里可以再 设置一个方法 通过父组件来操作，这里就不再多说//window.open(this.shadowHref, "_" + this.openType);let content = "";this.$axios.get(this.shadowHref).then((res) => {this.$emit("changeContent", res.data);});}},jugeInShadow(event) {// 如果在canvas 的画布上移动，但是当你移除所绘制的图形（阴影） 则也判定离开let e = document.getElementById("shadowDiv");let xmin = e.style.left.replace("px", "");let ymin = e.style.top.replace("px", "");let c = document.getElementById("myCanvas");let ctx = c.getContext("2d");// 通过 canvas的isPointInPath 来判断点击的位置  是在绘制的图形上  而不只是在canvas的画布上if (!ctx.isPointInPath(event.pageX - this.relativePosX - xmin,event.pageY - this.relativePosY - ymin)) {// 在多边形内let e = document.getElementById("shadowDiv");e.style.display = "none";}},showShadow(event) {// 阴影显示let e = event.currentTarget;let type = e.shape;let coords = e.coords.split(",");let c = document.getElementById("myCanvas");let ctx = c.getContext("2d");ctx.clearRect(0, 0, c.width, c.height);this.shadowHref = e.title;let shadowDiv = document.getElementById("shadowDiv");shadowDiv.style.display = "block";if ("rect" == type) {// area 是矩形 绘制 canvas 并遮罩该矩形// 计算画布的宽高this.canvasHeight = coords[3] - coords[1];this.canvasWidth = coords[2] - coords[0];c.width = this.canvasWidth;c.height = this.canvasHeight;// 矩形 直接使用 画布的宽高作为矩形的宽高ctx.rect(0, 0, c.width, c.height);// 设置阴影的div 的相对位置shadowDiv.style.top = coords[1] + "px";shadowDiv.style.left = coords[0] + "px";}if ("circle" == type) {// 计算canvas的宽高即为 直径this.canvasHeight = 2 * coords[2];this.canvasWidth = 2 * coords[2];ctx.beginPath();// 绘制圆形ctx.arc(coords[2], coords[2], coords[2], 0, 2 * Math.PI);ctx.closePath();// 设置阴影的div 的相对位置shadowDiv.style.top = coords[1] - coords[2] + "px";shadowDiv.style.left = coords[0] - coords[2] + "px";}if ("poly" == type) {//将coords 转化为坐标点// 取出最大的let vs = [];// 获取 多边形中 横坐标纵坐标的 最大最小值let xmax = coords[0];let xmin = coords[0];let ymax = coords[1];let ymin = coords[1];for (var temp = 0; temp < coords.length; temp += 2) {vs.unshift([coords[temp], coords[temp + 1]]);xmax = xmax > coords[temp] ? xmax : coords[temp];xmin = xmin > coords[temp] ? coords[temp] : xmin;ymax = ymax > coords[temp + 1] ? ymax : coords[temp + 1];ymin = ymin > coords[temp + 1] ? coords[temp + 1] : ymin;}// 计算 画布的高度c.height = ymax - ymin;// 计算 画布的宽度c.width = xmax - xmin;// 绘制多边形ctx.beginPath();ctx.moveTo(vs[0][0] - xmin, vs[0][1] - ymin);for (var m = 1; m < vs.length; m++) {ctx.lineTo(vs[m][0] - xmin, vs[m][1] - ymin);}ctx.closePath();// 设置阴影的div 的相对位置shadowDiv.style.top = ymin + "px";shadowDiv.style.left = xmin + "px";}// 根据 设置的阴影颜色来设置矩形的填充色ctx.fillStyle = this.shadowColor;ctx.fill();},},
};
</script>

把父组件调用的代码也贴一下咱就结束了

<template><div><hotspotShadowshadowColor="rgba(0,100,200,0.5)":openType="openType":imgUrl="imgUrl":areas="areas"></hotspotShadow></div>
</template>
<script >
import hotspotShadow from "./hotspot-shadow.vue";
export default {components: {hotspotShadow,},data() {return {openType: "self",imgUrl: require("../../assets/3.jpg"),areas: [{type: "circle",coord: "260,60,70",href: "http://www.baidu.com",},{type: "rect",coord: "23,145,393,345",href: "http://www.baidu.com",},{type: "rect",coord: "400,145,522,383",href: "http://www.baidu.com",},{type: "rect",coord: "23,345,393,532",href: "http://www.baidu.com",},{type: "rect",coord: "400,401,522,630",href: "http://www.baidu.com",},{type: "poly",coord: "23,535,393,535,393,630,522,636,522,765,23,765",href: "http://www.newlixon.com",},],};},
};
</script>

图片热区阴影遮罩 area_shadow相关推荐

redius在php中的使用,HTML_使用css给图片添加阴影入门篇，一般我们可以使用背景图的方 - phpStudy...
使用css给图片添加阴影入门篇一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 我们可以采取"视觉欺骗大法"--定义渐变边框来实现 a href=& ...
为图片添加半透明遮罩效果
平时为图片添加半透明遮罩效果,我的做法如下: 利用标签i实现背景半透明遮罩.当鼠标hover时, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6) < ...
css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效
这是一款CSS3鼠标hover图片超酷遮罩层动画特效.该特效中,当鼠标悬停在图片上面的时候,左右两个遮罩层会向中间收缩,最后合成一个完整的遮罩层.效果截图如下: HTML代码 Williamson ...
图片热区map-area
自适应图片热区坐标: html: <div id="imgContainer" > <img src="../../assets/flow_chart. ...
[html] 你有用过图片热区吗？它有什么运用场景？
[html] 你有用过图片热区吗?它有什么运用场景? 点击logo回到主页点击地图区块跳到具体的地方网站个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
[html] html如何创建图片热区（img usemap）？
[html] html如何创建图片热区(img usemap)? <img src="china.gif" usemap="#mymap">< ...
php为图片添加渐变背景,HTML_CSS实例:通过定义渐变边框给图片加阴影，一般我们可以使用背景图的方 - phpStudy...
CSS实例:通过定义渐变边框给图片加阴影一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 我们可以采取"视觉欺骗大法"--定义渐变边框来实现代码: ...
CSS3动画 - 图片开关灯阴影动画
1. 效果图 2. 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
html图片热区map、area的使用
html图片热区map.area的使用在项目中需要点击图片某个位置,然后变换不同的颜色. 之前听说dw可以通过拖拽实现,也可以通用canvas画布实现,但是太麻烦了而map的area可以定义一个坐 ...

图片热区阴影遮罩 area_shadow

图片热区阴影遮罩 area_shadow相关推荐

最新文章

热门文章