首页 > 其他分享 >svg 绘制旗帜

svg 绘制旗帜

时间:2023-12-18 11:57:55浏览次数:39  
标签:10 const svg poleWidth 旗帜 绘制 poleY poleX

效果:

 

const drawFlag = () => {
  const viewBox = 1024;

  const poleHeight = 1000;
  const poleWidth = 60;
  const poleX = 10;
  const poleY = 10;


  const x = poleX + poleWidth;
  const y = poleY + poleWidth;
  const width = 800;
  const height = 600;
  const radian = 90;

  return `<svg viewBox="0 0 ${viewBox} ${viewBox}" width="50" height="50" style="margin: auto 100px">
            <rect x="${poleX}" y="${poleY}" width="${poleWidth}" height="${poleHeight}" stroke="#000" />
            <path d="M ${x} ${y} Q ${width/4} ${y -radian}, ${width/2} ${y} Q ${width/4*3} ${y+radian}, ${width} ${y} L ${width} ${height} Q ${width/4*3} ${height+radian}, ${width/2} ${height} Q ${width/4} ${height-radian}, ${x} ${height} Z" stroke="#000"  />
          </svg>`;
}

 

标签:10,const,svg,poleWidth,旗帜,绘制,poleY,poleX
From: https://www.cnblogs.com/hello-dummy/p/17910809.html

相关文章

  • 动态绘制svg
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=......
  • Highcharts 用SVGRenderer方法点击鼠标移动光标​
    需求演示如何使用SVGRenderer方法来实现点击鼠标移动光标,并解释说明属性功能。分析使用SVGRenderer方法来实现点击鼠标移动光标,可以按照以下步骤进行操作:创建SVGRenderer实例:首先,你需要创建一个SVGRenderer实例,用于渲染SVG元素和操作SVG属性。设置SVG元素属性:使用SVGRenderer的方法......
  • Highcharts 用SVGRenderer方法使柱状图连接列边​
    需求在Highcharts中,可以使用SVGRenderer方法来创建路径连接柱状图的列边,并根据具体的数据和需求进行适当的调整和扩展。分析要使用Highcharts的SVGRenderer方法来绘制柱状图并连接列边,可以按照以下步骤进行操作:创建柱状图:使用Highcharts的 chart 方法创建一个柱状图,并......
  • 分享一款基于jsplumb.js的二开工作流绘制工具
    lazyflow-modeler介绍基于jsplumb二开的模型绘制工具,jquery版,易拓展软件架构jsplumb+jquery+bootstrap安装教程1.直接访问drawer.html使用说明1.约定了上下左右4个端点2.允许回连3.拒绝自连4.无nodejs依赖5.本人非前端开发人员,js规范问题请无视giteehttps://gitee.com/fing......
  • matlab绘制纹理图并用图案填充或斑点填充区域
    ✅作者简介:热爱科研的算法开发者,Python、Matlab项目可交流、沟通、学习。......
  • Highcharts 使用SVGRenderer方法绘制极地图​
    需求展示如何创建一个极地图、设置样式,并使用SVGRenderer方法绘制解释说明的路径和文本。分析要使用Highcharts的SVGRenderer方法绘制极地图,可以按照以下步骤操作:首先,创建一个极地图实例,并设置所需的配置项;创建一个SVGRenderer实例,使用SVGRenderer的path方法绘制路径;可以......
  • 记录--Echarts绘制气泡图
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助Echarts绘制气泡图气泡图是一种用于可视化三维数据的图表类型,其中两个变量用于确定数据点在平面上的位置,另一个变量用于确定气泡的大小。Echarts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型,包括灵......
  • 15、自定义绘制图形(双缓冲机制)
    效果图 //drawwidget.h#ifndefDRAWWIDGET_H#defineDRAWWIDGET_H#include<QObject>#include<QWidget>#include<QtGui>#include<QMouseEvent>//鼠标事件#include<QPaintEvent>//绘制事件#include<QResizeEvent>//实时获取窗口操作等的大......
  • 14、绘制图形(QPainter)
    效果 //定义一个新的类#ifndefPAINTERAREA_H#definePAINTERAREA_H#include<QObject>#include<QWidget>//QPen画笔是基本的图形对象,绘制直线、曲线、多边形等形状#include<QPen>//QBrush画刷是基本的图形对象,主要用于填充,比如矩形、多边形等形状#include<Q......
  • Python 通过 akshare 轻松绘制股票中国平安K线图
    想通过Python和akshare绘制K线图,网上找了很多代码,放在Pycharm中都是无法正常运行绘制的,于是自己整理了下并调试成功。环境:python3.9(miniconda3)、Pycharm、Win10需要用的模块或者工具库:akshare(1.11.91)、pandas(2.1.1)、numpy(1.26.2)、matplotlib(3.8.2)、mplfinanc......