canvas绘制信息提示框

最新推荐文章于 2022-11-24 11:47:25 发布

MMMpppOOOO

最新推荐文章于 2022-11-24 11:47:25 发布

阅读量1.7k

点赞数 2

分类专栏： canvas gis 文章标签： javascript gis

本文链接：https://blog.csdn.net/lanchuangmiao0765/article/details/117366431

版权

canvas 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

gis

1 篇文章 0 订阅

订阅专栏

需求场景：运维一个好早之前的项目，需要在通过iclient开发的地图上展示marker图标的同时，展示marker里的一些属性信息，没找到好用的api，所以就通过canvas自己来动态的画出来，画圆角矩形，再以marker方式添加到地图上，看起来还不错。其他gis框架有遇到差不多需求的，也可以使用这个方法来实现。

/**
 * 绘制提示框tooltips
 * @param text 文字内容
 * @param fontsize 字体大小
 * @param fontcolor 字体颜色
 * @param bgcolor 背景颜色
 * todo 框子高度默认为36，后面还可以拓展，做换行处理
 */
function getToolTipImg(text,fontsize,fontcolor,bgcolor) {

    var obj = {};

    var canvas = document.createElement('canvas');
    var width = getCanvasWidth(text,fontsize);
    var boundWidth = getCanvasWidth(text,fontsize)+32;//两边间距16+16
    canvas.width = boundWidth;
    canvas.height = 36;
    var context=canvas.getContext("2d");
    //画框子
    fillRoundRect(context, 0, 0, boundWidth, 30, 5, bgcolor);//rgba(0,0,0,0.7)

    context.font=fontsize+"px Arial";
    context.textBaseline = 'middle';
    context.fillStyle = fontcolor;

    var sw = boundWidth/2.0-width/2.0;//计算字体居中的开始位置

    context.fillText(text,sw,fontsize+2);

    var dataUrl = canvas.toDataURL('image/png');
    obj.url = dataUrl;
    obj.width = boundWidth;
    obj.height = 36;
    return obj;
}
function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
    //圆的直径必然要小于矩形的宽高
    if (2 * radius > width || 2 * radius > height) { return false; }

    cxt.save();
    cxt.translate(x, y);
    //绘制圆角矩形的各个边
    drawRoundRectPath(cxt, width, height, radius);
    cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值
    cxt.fill();
    cxt.restore();
}

function drawRoundRectPath(cxt, width, height, radius) {
    cxt.beginPath(0);
    //从右下角顺时针绘制，弧度从0到1/2PI
    cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

    //矩形下边线

    //绘制提示框那个尖尖角，强吧
    cxt.lineTo(width/2.0+4, height);
    cxt.lineTo(width/2.0, height+6);
    cxt.lineTo(width/2.0-4, height);

    cxt.lineTo(radius, height);

    //左下角圆弧，弧度从1/2PI到PI
    cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

    //矩形左边线
    cxt.lineTo(0, radius);

    //左上角圆弧，弧度从PI到3/2PI
    cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

    //上边线
    cxt.lineTo(width - radius, 0);

    //右上角圆弧
    cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

    //右边线
    cxt.lineTo(width, height - radius);
    cxt.closePath();
}

function getCanvasWidth(text,fontsize) {
    var canvas = document.createElement('canvas');
    var ctx=canvas.getContext("2d");
    ctx.font=fontsize+"px Arial";
    ctx.textBaseline = 'middle';
    var width = ctx.measureText(text).width;
    var boundWidth = width;
    return boundWidth;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="canvas-tooltip.js"></script>
</head>
<body>
<img src="" id="show">
</body>
<script>

    document.getElementById("show").src = getToolTipImg("李小龙",14,"#fff","#1890FF").url;
</script>
</html>

MMMpppOOOO

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
canvas绘制信息提示框

需求场景：运维一个好早之前的项目，需要在通过iclient开发的地图上展示marker图标的同时，展示marker里的一些属性信息，没找到好用的api，所以就通过canvas自己来动态的画出来，画圆角矩形，再以marker方式添加到地图上，看起来还不错。其他gis框架有遇到差不多需求的，也可以使用这个方法来实现。/** * 绘制提示框tooltips * @param text 文字内容 * @param fontsize 字体大小 * @param fontcolor 字体颜色 *
复制链接

扫一扫