HTML5 Canvas实现放大镜效果示例
图片放大镜效果
原理
首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示:
初始化
<canvas id="canvas" width="500" height="500"> </canvas> <img src="image.png" style="display: none" id="img">
获得 canvas 和 image 对象,这里使用 <img>
标签预加载图片, 关于图片预加载可以看
var canvas = document.getelementbyid("canvas"); var context = canvas.getcontext("2d"); var img = document.getelementbyid("img");
设置相关变量
// 图片被放大区域的中心点,也是放大镜的中心点 var centerpoint = {}; // 图片被放大区域的半径 var originalradius = 100; // 图片被放大区域 var originalrectangle = {}; // 放大倍数 var scale = 2; // 放大后区域 var scaleglassrectangle
画背景图片
function drawbackground() { context.drawimage(img, 0, 0); }
计算图片被放大的区域的范围
这里我们使用鼠标的位置作为被放大区域的中心点(放大镜随着鼠标移动而移动),因为 canvas 在画图片的时候,需要知道左上角的坐标以及区域的宽高,所以这里我们计算区域的范围
function caloriginalrectangle(point) { originalrectangle.x = point.x - originalradius; originalrectangle.y = point.y - originalradius; originalrectangle.width = originalradius * 2; originalrectangle.height = originalradius * 2; }
绘制放大镜区域
裁剪区域
放大镜一般是圆形的,这里我们使用 clip
函数裁剪出一个圆形区域,然后在该区域中绘制放大后的图。一旦裁减了某个区域,以后所有的绘图都会被限制的这个区域里,这里我们使用 save
和 restore
方法清除裁剪区域的影响。save
保存当前画布的一次状态,包含 canvas 的上下文属性,例如 style
,linewidth
等,然后会将这个状态压入一个堆栈。restore
用来恢复上一次 save 的状态,从堆栈里弹出最顶层的状态。
context.save(); context.beginpath(); context.arc(centerpoint.x, centerpoint.y, originalradius, 0, math.pi * 2, false); context.clip(); ...... context.restore();
计算放大镜区域
通过中心点、被放大区域的宽高以及放大倍数,获得区域的左上角坐标以及区域的宽高。
scaleglassrectangle = { x: centerpoint.x - originalrectangle.width * scale / 2, y: centerpoint.y - originalrectangle.height * scale / 2, width: originalrectangle.width * scale, height: originalrectangle.height * scale }
绘制图片
在这里我们使用 context.drawimage(img,sx,sy,swidth,sheight,x,y,width,height);
方法,将 canvas 自身作为一副图片,然后取被放大区域的图像,将其绘制到放大镜区域里。
context.drawimage(canvas, originalrectangle.x, originalrectangle.y, originalrectangle.width, originalrectangle.height, scaleglassrectangle.x, scaleglassrectangle.y, scaleglassrectangle.width, scaleglassrectangle.height );
绘制放大边缘
createradialgradient
用来绘制渐变图像
context.beginpath(); var gradient = context.createradialgradient( centerpoint.x, centerpoint.y, originalradius - 5, centerpoint.x, centerpoint.y, originalradius); gradient.addcolorstop(0, 'rgba(0,0,0,0.2)'); gradient.addcolorstop(0.80, 'silver'); gradient.addcolorstop(0.90, 'silver'); gradient.addcolorstop(1.0, 'rgba(150,150,150,0.9)'); context.strokestyle = gradient; context.linewidth = 5; context.arc(centerpoint.x, centerpoint.y, originalradius, 0, math.pi * 2, false); context.stroke();
添加鼠标事件
为 canvas 添加鼠标移动事件
canvas.onmousemove = function (e) { ...... }
转换坐标
鼠标事件获得坐标一般为屏幕的或者 window 的坐标,我们需要将其装换为 canvas 的坐标。getboundingclientrect
用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。
function windowtocanvas(x, y) { var bbox = canvas.getboundingclientrect(); return {x: x - bbox.left, y: y - bbox.top} }
修改鼠标样式
我们可以通过 css 来修改鼠标样式
#canvas { display: block; border: 1px solid red; margin: 0 auto; cursor: crosshair; }
图表放大镜
我们可能基于 canvas 绘制一些图表或者图像,如果两个元素的坐标离得比较近,就会给元素的选择带来一些影响,例如我们画两条线,一个线的坐标是(200.5, 400) -> (200.5, 200)
,另一个线的坐标为 (201.5, 400) -> (201.5, 20)
,那么这两条线几乎就会重叠在一起,如下图所示:
使用图表放大镜的效果
原理
类似于地图中的图例,放大镜使用较为精确的图例,如下图所示:
在放大镜坐标系统中,原始的区域会变大,如下图所示
绘制原始线段
首先创建一个线段对象
function line(xstart, ystart, xend, yend, index, color) { // 起点x坐标 this.xstart = xstart; // 起点y坐标 this.ystart = ystart; // 终点x坐标 this.xend = xend; // 终点y坐标 this.yend = yend; // 用来标记是哪条线段 this.index = index; // 线段颜色 this.color = color; }
初始化线段
// 原始线段 var chartlines = new array(); // 处于放大镜中的原始线段 var glasslines; // 放大后的线段 var scaleglasslines; // 位于放大镜中的线段数量 var glasslinesize; function initlines() { var line; line = new line(200.5, 400, 200.5, 200, 0, "#888"); chartlines.push(line); line = new line(201.5, 400, 201.5, 20, 1, "#888"); chartlines.push(line); glasslinesize = chartlines.length; glasslines = new array(glasslinesize); for (var i = 0; i < glasslinesize; i++) { line = new line(0, 0, 0, 0, i); glasslines[i] = line; } scaleglasslines = new array(glasslinesize); for (var i = 0; i < glasslinesize; i++) { line = new line(0, 0, 0, 0, i); scaleglasslines[i] = line; } }
绘制线段
function drawlines() { var line; context.linewidth = 1; for (var i = 0; i < chartlines.length; i++) { line = chartlines[i]; context.beginpath(); context.strokestyle = line.color; context.moveto(line.xstart, line.ystart); context.lineto(line.xend, line.yend); context.stroke(); } }
计算原始区域和放大镜区域
function calglassrectangle(point) { originalrectangle.x = point.x - originalradius; originalrectangle.y = point.y - originalradius; originalrectangle.width = originalradius * 2; originalrectangle.height = originalradius * 2; scaleglassrectangle.width = originalrectangle.width * scale; scaleglassrectangle.height = originalrectangle.height * scale; scaleglassrectangle.x = originalrectangle.x + originalrectangle.width / 2 - scaleglassrectangle.width / 2; scaleglassrectangle.y = originalrectangle.y + originalrectangle.height / 2 - scaleglassrectangle.height / 2; // 将值装换为整数 scaleglassrectangle.width = parseint(scaleglassrectangle.width); scaleglassrectangle.height = parseint(scaleglassrectangle.height); scaleglassrectangle.x = parseint(scaleglassrectangle.x); scaleglassrectangle.y = parseint(scaleglassrectangle.y); }
计算线段在新坐标系统的位置
由原理图我们知道,放大镜中使用坐标系的图例要比原始坐标系更加精确,比如原始坐标系使用 1:100
,那么放大镜坐标系使用 1:10
,因此我们需要重新计算线段在放大镜坐标系中的位置。同时为了简便,我们将线段的原始坐标进行了转化,减去原始区域起始的x值和y值,即将原始区域左上角的点看做为(0,0)
。
function calscalelines() { var xstart = originalrectangle.x; var xend = originalrectangle.x + originalrectangle.width; var ystart = originalrectangle.y; var yend = originalrectangle.y + originalrectangle.height; var line, gline, sgline; var glasslineindex = 0; for (var i = 0; i < chartlines.length; i++) { line = chartlines[i]; // 判断线段是否在放大镜中 if (line.xstart < xstart || line.xend > xend) { continue; } if (line.yend > yend || line.ystart < ystart) { continue; } gline = glasslines[glasslineindex]; sgline = scaleglasslines[glasslineindex]; if (line.yend > yend) { gline.yend = yend; } if (line.ystart < ystart) { gline.ystart = ystart; } gline.xstart = line.xstart - xstart; gline.ystart = line.ystart - ystart; gline.xend = line.xend - xstart; gline.yend = line.yend - ystart; sgline.xstart = parseint(gline.xstart * scale); sgline.ystart = parseint(gline.ystart * scale); sgline.xend = parseint(gline.xend * scale); sgline.yend = parseint(gline.yend * scale); sgline.color = line.color; glasslineindex++; } glasslinesize = glasslineindex; }
绘制放大镜中心点
绘制放大镜中心的瞄准器
function drawanchor() { context.beginpath(); context.linewidth = 2; context.fillstyle = "#fff"; context.strokestyle = "#000"; context.arc(parseint(centerpoint.x), parseint(centerpoint.y), 10, 0, math.pi * 2, false); var radius = 15; context.moveto(parseint(centerpoint.x - radius), parseint(centerpoint.y)); context.lineto(parseint(centerpoint.x + radius), parseint(centerpoint.y)); context.moveto(parseint(centerpoint.x), parseint(centerpoint.y - radius)); context.lineto(parseint(centerpoint.x), parseint(centerpoint.y + radius)); //context.fill(); context.stroke(); }
绘制放大镜
function drawmagnifyingglass() { calscalelines(); context.save(); context.beginpath(); context.arc(centerpoint.x, centerpoint.y, originalradius, 0, math.pi * 2, false); context.clip(); context.beginpath(); context.fillstyle = "#fff"; context.arc(centerpoint.x, centerpoint.y, originalradius, 0, math.pi * 2, false); context.fill(); context.linewidth = 4; for (var i = 0; i < glasslinesize; i++) { context.beginpath(); context.strokestyle = scaleglasslines[i].color; context.moveto(scaleglassrectangle.x + scaleglasslines[i].xstart, scaleglassrectangle.y + scaleglasslines[i].ystart); context.lineto(scaleglassrectangle.x + scaleglasslines[i].xend, scaleglassrectangle.y + scaleglasslines[i].yend); context.stroke(); } context.restore(); context.beginpath(); var gradient = context.createradialgradient( parseint(centerpoint.x), parseint(centerpoint.y), originalradius - 5, parseint(centerpoint.x), parseint(centerpoint.y), originalradius); gradient.addcolorstop(0.50, 'silver'); gradient.addcolorstop(0.90, 'silver'); gradient.addcolorstop(1, 'black'); context.strokestyle = gradient; context.linewidth = 5; context.arc(parseint(centerpoint.x), parseint(centerpoint.y), originalradius, 0, math.pi * 2, false); context.stroke(); drawanchor(); }
添加事件
鼠标拖动
鼠标移动到放大镜上,然后按下鼠标左键,可以拖动放大镜,不按鼠标左键或者不在放大镜区域都不可以拖动放大镜。
为了实现上面的效果,我们要实现3种事件 mousedown
, mousemove
, 'mouseup', 当鼠标按下时,检测是否在放大镜区域,如果在,设置放大镜可以移动。鼠标移动时更新放大镜中兴点的坐标。鼠标松开时,设置放大镜不可以被移动。
canvas.onmousedown = function (e) { var point = windowtocanvas(e.clientx, e.clienty); var x1, x2, y1, y2, dis; x1 = point.x; y1 = point.y; x2 = centerpoint.x; y2 = centerpoint.y; dis = math.pow(x2 - x1, 2) + math.pow(y2 - y1, 2); if (dis < math.pow(originalradius, 2)) { lastpoint.x = point.x; lastpoint.y = point.y; moveglass = true; } } canvas.onmousemove = function (e) { if (moveglass) { var xdis, ydis; var point = windowtocanvas(e.clientx, e.clienty); xdis = point.x - lastpoint.x; ydis = point.y - lastpoint.y; centerpoint.x += xdis; centerpoint.y += ydis; lastpoint.x = point.x; lastpoint.y = point.y; draw(); } } canvas.onmouseup = function (e) { moveglass = false; }
鼠标双击
当移动到对应的线段上时,鼠标双击可以选择该线段,将该线段的颜色变为红色。
canvas.ondblclick = function (e) { var xstart, xend, ystart, yend; var clickpoint = {}; clickpoint.x = scaleglassrectangle.x + scaleglassrectangle.width / 2; clickpoint.y = scaleglassrectangle.y + scaleglassrectangle.height / 2; var index = -1; for (var i = 0; i < scaleglasslines.length; i++) { var scaleline = scaleglasslines[i]; xstart = scaleglassrectangle.x + scaleline.xstart - 3; xend = scaleglassrectangle.x + scaleline.xstart + 3; ystart = scaleglassrectangle.y + scaleline.ystart; yend = scaleglassrectangle.y + scaleline.yend; if (clickpoint.x > xstart && clickpoint.x < xend && clickpoint.y < ystart && clickpoint.y > yend) { scaleline.color = "#f00"; index = scaleline.index; break; } } for (var i = 0; i < chartlines.length; i++) { var line = chartlines[i]; if (line.index == index) { line.color = "#f00"; } else { line.color = "#888"; } } draw(); }
键盘事件
因为线段离得比较近,所以使用鼠标移动很难精确的选中线段,这里使用键盘的w
, a
, s
, d
来进行精确移动
document.onkeyup = function (e) { if (e.key == 'w') { centerpoint.y = intadd(centerpoint.y, -0.2); } if (e.key == 'a') { centerpoint.x = intadd(centerpoint.x, -0.2); } if (e.key == 's') { centerpoint.y = intadd(centerpoint.y, 0.2); } if (e.key == 'd') { centerpoint.x = intadd(centerpoint.x, 0.2); } draw(); }
** 参考资料 **
html5-magnifyingglass
到此这篇关于html5 canvas实现放大镜效果示例的文章就介绍到这了,更多相关html5 canvas放大镜内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!