首页 > 其他分享 >基于canvas 或 svg绘制并生成base64 用于cesium billboard 渲染 替代label

基于canvas 或 svg绘制并生成base64 用于cesium billboard 渲染 替代label

时间:2024-04-09 13:55:06浏览次数:28  
标签:canvas const svg base64 ctx height width radius context

原因

  1. cesium 的label样式不太好修改

canvas 生成

function labelContent(showData) {
    const myConvas = document.createElement("canvas");
    const scale = 1;
    //获取2d的上线文开始设置相关属性
    myConvas.width = 150
    myConvas.height = 65;
    let context = myConvas.getContext('2d')
   roundRect(context, 0, 0, myConvas.width, myConvas.height, 15, "#0081DE")

    //填充文字

    let fontSize = 14 * scale
    context.font = fontSize + "px 'Microsoft Yahei'";
    context.fillStyle = "#ffffff";
    const drawStartX = 15;
    const drawStartY = 19;
    context.fillText(showData.cityName, drawStartX, drawStartY);
    context.fillText(showData.projectNum, drawStartX, drawStartY + 18);
    context.fillText(showData.budget, drawStartX, drawStartY + 35);
    context.imageSmoothingEnabled = true;
    return myConvas.toDataURL('image/png');

  }
 function roundRect(ctx, x, y, width, height, radius, bgColor) {
    // 开始绘制
    ctx.beginPath();
    ctx.moveTo(x + radius, y);

    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);

    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);

    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);

    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.fillStyle = bgColor;

    ctx.closePath();
    ctx.fill();

  }

svg生成

  function labelSvg(showData) {
    const svgStr = `
    <svg width="150" height="65" xmlns="http://www.w3.org/2000/svg">  
      <!-- 创建一个带有圆角的矩形作为背景 -->  
      <rect x="0" y="0" rx="15" ry="15" width="150" height="65" style="fill:#0081DE;stroke:black;stroke-width:0;"/>  
  
      <!-- 在矩形中填充文字 -->  
      <text x="15" y="15" fill="white" font-family="Microsoft Yahei" font-size="15"  text-align="center" alignment-baseline="middle">  
        ${showData.cityName}  
      </text> 
      <text x="15" y="35" fill="white" font-family="Microsoft Yahei" font-size="15"  text-align="center" alignment-baseline="middle">  
        ${showData.projectNum}  
      </text> 
      <text x="15" y="54" fill="white" font-family="Microsoft Yahei" font-size="15"  text-align="center" alignment-baseline="middle">  
        ${showData.budget}  
      </text>  
    </svg>
    `
    return svgToImg(svgStr)
  }
  function svgToImg(svgStr) {
    const blob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });

    // 创建一个 FileReader 对象来读取 Blob  
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    // 当 FileReader 完成读取时,它会触发 'load' 事件  
    return new Promise((resolve) => {
      reader.onloadend = function () {
        resolve(reader.result)
      };
    })

  }

使用

    const img = await this.labelSvg(data)
    let newEntity = new Cesium.Entity({
      position: Cesium.Cartesian3.fromDegrees(data.x, data.y),
      billboard: {
        image: img,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000000.0, 900000000.0),
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      }

    })

 

  

标签:canvas,const,svg,base64,ctx,height,width,radius,context
From: https://www.cnblogs.com/xiaoqiyaozou/p/18123820

相关文章

  • [SVG]修改固定颜色为填充颜色
    主要思路是把fill和stroke改成currentColor,具体以后补充。 修改之前:<svgxmlns="http://www.w3.org/2000/svg"viewBox="003636"><gtransform="translate(11)"fill="none"fill-rule="evenodd"><rect......
  • 如何在vue工程中模块化使用大量的svg图片
    如果你在执行 requireAll(requireSvg) 后得到的是一个 BrowserSpriteSymbol 数组,并且能够直接使用 <use> 进行引用,这通常意味着在构建过程中有一些特定的Webpack配置和/或自定义加载器(loader)被用来处理SVG文件,并将它们转换为一个SVGSprite,其中每个SVG都转换为了一个......
  • python data:image/jpeg;base64为网址的图片改如何下载
    网址以data开头的文件,这里采用base64进行编码。它叫做dataURI scheme,是一种网页优化的手段。让我们直接把图像的内容崁入网页里面,减少页面的请求data:表示协议image/jpg:数据类型编码方式:base64可以通过解码的方式下载图片importbase64defdownload_auth_img(self,im......
  • 深入了解图片Base64编码
    title:深入了解图片Base64编码date:2024/4/810:03:22updated:2024/4/810:03:22tags:Base64编码图片转换HTTP请求前端开发移动应用性能优化图片压缩1.什么是Base64编码Base64编码是一种将二进制数据转换为文本字符串的编码方式,通过将数据转换为一种可打印的......
  • OpenSSL测试-Base64
    OpenSSL测试-Base64本次作业分值20分|老师评分 任务详情0.在openEuler(推荐)或Ubuntu或Windows(不推荐)中完成下面任务1.使用工具(如bc,计算机器等)把自己学号转化为16进制,提交转化过程和结果截图(2‘)2.使用工具(如echo-e,ultraedit等)把上面转化的结果写入二进......
  • 【攻防技术技术】-- js+base64
    全文用时:10min在JavaScript中,btoa和atob是两个用于Base64编码和解码的函数。下面是对这两个函数以及Base64的解释和代码示例:btoa函数:btoa(表示base64encode)将字符串转换为Base64编码的数据。它接受一个ASCII字符串参数,并返回经过Base64编码的字符串。b表示"b......
  • Base64 编码的字符串转换为 Blob 对象方法
    Base64编码的字符串转换为Blob对象方法 constblob=function(data:string,mime:string){data=data.split(',')[1];data=window.atob(data);letia=newUint8Array(data.length);for(vari=0;i<data.length;i++){ia[i]=data.ch......
  • C#-JavaScript-base64加密解码
    C#//base64加密//调用方式:Helper.EncodeToBase64(需要加密字符串)publicstaticstringEncodeToBase64(stringdata){byte[]byteData=Encoding.UTF8.GetBytes(data);returnConvert.ToBase64String(byteData);......
  • ASP.NET Core 使用 pdfjs 加载 实时水印 base64 编码的 PDF
    先下载pdfjs:https://github.com/mozilla/pdf.js目前最新版本是4.0.379把需要的文件放到项目下面,由于最新的pdfjs使用的mjs,看情况可以加下MIME类型:varprovider=newFileExtensionContentTypeProvider();provider.Mappings[".mjs"]="application/javascript";provider......
  • 矿鸿中,svg 图片应用
    避坑记录1、界面渲染时,transform属性不生效 2、svg使用fillcolor时,颜色未生效,svg标签添加fill=currentColor,再把自身fill移除 ......