前端

首页友情链接点点滴滴关于本站

一个游离于山间之上的Java爱好者 | A Java lover living in the mountains

累计撰写 137 篇文章
累计创建 297 个标签
累计创建 45 个分类

栏目

分类前端

canvas绘制文本时，该如何处理首行缩进、自动换行、多内容以省略号结束、竖排的呢？实现如标题所示的这些文本效果，在css看来，不就是一两行css属性。然而，对于canvas来讲，要想呈现这样的文字样式，就没css那么轻松简便了。既然如此，那为何还要使用对文本支持度不友好的canvas来绘制文字呢？而不是采用对文本天然支持的css呢？ canvas 绘制文本的场景在给为何弃对文本天然支持的 css而不用，拣起了文本支持度不友好的canvas的答复之时。不妨先来看看，究竟是在什么样的场景下，需要用到canvas去绘制文本呢？常逛商场的，总会不时地看到一些商家为了吸引客流而制作出的一张精美海报；再看艺术展前，也总能在大门看到本次参展的“艺术家”们最为得意的艺术及简介，所绘制的一张海报；去电影院观看的，大都是被该片前期在各大商场及公共场合宣传的那张海报而吸引来的。…… 是咯，照这样看来，海报的确可以作为事物的重要途径，虽然海报承载的内容有限，但一张足够优美的海报，总是能把人们的目光给吸引过来的，好比去书店买书，总是会翻到书的背面。甭管对前沿技术的学习，抑或是为了解决问题而去搜寻资料，你总免不了在各大博客（如：秋码记录）、论坛、社区以及生活类情感博客等网站游离，那些博文、贴文等总能解决你的燃眉之急的问题，而你也会在兴奋之余随手将该文分享给朋友。很显然，文章分享功能可以说是各大网站的基础功能，网站运营者也热衷于你把文章分享出去，从而悄无声息的向你朋友推荐了该网站。所以，网站运营者是绝不会错失这样一个向用户宣传网站媒介之一的机会。然而，社会分享组件（第三方分享：诸如 QQ、微信、微薄……）并不能很好的推介网站，基于这种状况，一张既有文章的概要，又有网站的简介的海报便应运而生了。（秋码记录便能为文章生成一张精美的海报）。网站生成海报的几种方案无论是线下的，还是线上的海报，它都是一张图。对于线下，想要制作出一张海报，只需将事先做好的海报图打印出来即可，但就线上而言，网站页面结构主要由html、css、javascript构成，而文章内容及文章封面图都是不一样的，那么，在这样的情况下，又该如何为文章生成一张海报呢？既然知道了，海报是一张图，而文章页面结构又是html，那么只需将html转变成图不就成了吗？没错，要想为文章生成海报，只需把html转成图片即可，而且还有开源的第三方实现。 1、html2canvas.js：从其命名上来看，一眼便能知晓，它是将页面的html转成canvas。这也是众多网站生成海报的首选之一。它的便捷在于你想要为海报生成什么款式的，你只需像修改你网站那样去修改就好。（目前秋码记录是采用这种方式来为文章生成海报） 2、dom-to-image.js:与html2canvas.js大致差不多。 3、canvas：直接使用canvas绘制而生成的海报，基于wordpress的很多主题也都使用它来生成海报。（秋码记录即将采用这种方案） canvas绘制文本在使用canvas绘制文本之前，有必要了解下什么是canvas？其实，canvas也是作为html标签而存在于html结构中，而它常常被用来绘制图形及图形动画。在现实生活中，艺术家想要画出一张画，有两样东西是必不可少的——素描纸（写生纸）、HB铅笔。而在canvas中，同样需要设置画布的大小——width、height。 canvas绘制文本API CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]); text ： text是需要绘制的文本。 x ： x是文本绘制的水平参考点坐标。随着CanvasRenderingContext2D.textAlign的设置不同，x的坐标位置也不同。可以表示这段文字内容左侧坐标，或水平中心坐标，或右侧坐标。 y ： y是文本绘制的垂直参考点坐标。随着CanvasRenderingContext2D.textBaseline的设置不同，y的坐标位置也不同。支持多种基线类型（CSS中也有对应概念），MDN上有一张图可以很好地表示文本基线和文本垂直位置的关系。 **maxWidth**： maxWidth表示文本内容占据的最大宽度。这里的maxWidth概念和CSS中的max-width差别很大，其最终的文本表现是：当文本占据宽度超过maxWidth的后，所有的文本自动变窄以适应这个最大宽度限制。表现类似这样： canvas 如何实现文本首行缩进、自动换行、内容过多省略号呢？虽然到目前为止，canvas API中还并没有提供文本首行、自动换行、内容过多以省略号结束等的支持，但还是可以通过计算X Y偏移量来实现的。首行缩进对于文本首行缩进，也就是在首行空出相对应的字符个数的空白位置，从而使得与其它行在视觉上达到了缩进的效果。那么，canvas要想绘制出如css那样的首行缩进的文本样式效果，只需将X水平向右偏移相应的像素（pixel）即可。内容过多以省略号结尾无论是海报，还是书本的封面，总不肯多写几个字，倒像是一个惜字如命的家伙，生怕自己写多了，给自个儿带来了寿命减少几秒钟的担忧。那么，这时候，省略号这时候便闪亮登场了，很好地诠释着这一足够吸引用户眼球的重要任务。而在canvas绘制文本时，只需判断是否绘制到文本的最后，若是，便在最后给原有文本追加上...即可。自动换行相对于首行缩进来讲，canvas要想实现文本自动换行，不单单只是计算X水平偏移量那么简单咯！而还要计算Y纵向（垂直）偏移量，为了让你能够理解Y纵向偏移，我举个通俗的例子，我们平时不管是拿笔在纸上写字，还是在电子设备上敲击着文字，文本内容无不是由上而下、自上而下、从上而下的顺序呈现在我们的面前。由于纸或电子设备的宽度所限制，文本不得不另起一行，而这另起一行与之前的一行，就存在着纵向关系——另起一行是在之前的一行的下面（下方/ under），而之前的一行则就在另起一行的上方（上面 / upper）。在实现自动换行这一效果时，我们应考虑到canvas该如何知道绘制当前在哪个位置（X水平位置）确需另起一行呢？这一点很重要，也是实现canvas自动换行的核心所在。还是拿我们在纸张上写字或在电子设备上敲击文本时，我们知道换行（那是由于在纸张写的字大小差不多，一行只能容纳这么多文字）或电子设备设定好了字体大小，以此来推算出你写到哪个文字时，让你另起一行。那么，canvas实现自动换行可以通过计算文字字体大小`及纵向（Y）偏移量的。 canvas提供了CanvasRenderingContext2D.measureText(text)这个API，它可以用来计算字符的宽度。 canvas 是以左上角为原点，也就是说，X轴水平向右是`正数`，反之亦然；Y 轴纵向则是以向下为`正数`，反向则负。要让canvas知道该在哪个位置自动换行，只需将文本的每个字符宽度进行累加，判断总字符宽度是否达到了canvas所设定的画布宽度，若是，则另起一行继续绘制剩余的文本字符，当然咯，在另起一行时，纵向 Y偏移量是要往下移动。
- 2024-08-03
[前端建站]
使用CSS计数器，在目录名称前加上了序号，让目录看起来更加井然有序目录（Text of Contents缩写为TOC），其实就是一篇文章的概要或简述。这好比，去书店买书，先是被这本书的标题所吸引，而后我们才会，翻开这本书目录，看看这本书主要是在讲些什么？我们在看目录的同时，脑中也在不停的思衬，”这本书到底值不值得买呢？但是没有什么实战内容耶！“ 文章目录其实，一篇文章也不非要目录的，只要段落分的好，就算是长篇大论也是无关紧要的！只是文章有了目录，让人一眼就能瞧出这篇文章到底讲了什么？虽然标题上有说，但还是得为哪几个段落起个副标题。再说了，文章目录可以让用户在页面上，点击到达指定目录名称下进行浏览。虽然这在很大层度上是可以通过鼠标滑动，滚动到想要浏览的位置。 Hugo-theme-kiwi开源博客主题已然有了文章目录这一功能，也就是秋码记录站点正在使用的博客主题（由于秋码记录托管于 Github.com Pages，故而国内的友人在访问时，比较缓慢，甚至有时可能出现无法打开该网站）。对目录名称前添加序号，我们首先想到的当然是使用Hugo模板渲染去实现。序号，顾名思义，就是有顺序的号码，通俗来讲，便是1、，2、，3、，4、，……。可在Hugo模板渲染中使用计数器来实现。 css计数器或许也只有在使用了CSS 计数器后，你就会摒弃代码中使用Hugo模板渲染的那部分又长又拖代码了。在CSS计数器中，counter-reset和counter-increment属性是必不可少的。counter-reset在每次新的列表开始时重置计数器，而counter-increment在每个列表项上增加计数器。需要注意的是：counter-reset 是需要计数的父标签上的！那么，就将 counter-reset设置在ol标签上即可，即便是某一项有子目录，那也还是在ol标签内的！ .toc-content ol{ list-style-type: none; counter-reset: item } 现在，我们就可以对目录名称设置伪选择器了。在编写CSS样式之前，有必要说下counters()函数，在CSS中，它返回一个计数器的列表值，这个列表可以包含一个或者多个嵌套的计数器。函数counters()有两个参数：第一个参数是你要访问的计数器的名称，在你的例子中，该名称就是 item。第二个参数是字符串，用来分隔计数器的各个级别。在你的例子中，这个分隔符是英文的句点 . .toc-content ol li a:first-of-type::before{ counter-increment: item; content: counters(item,".")"、"; font-weight: 700; margin-right: 1px; } 比如在多级嵌套的列表中，如果在第一级的第二个项中的第三个小项，那么 counters() 的值就会是 2.3、。字符串、紧接着 counters(item, ".") 的作用是将结果后面添加一个顿号，使其格式化输出更美观。所以 counters(item, ".") ". " 的作用就是生成并显示一个根据当前嵌套列表项的层级和序号构成的数字序列，每一级数字之间用句点分隔，并在最后跟着一个顿号。例如输出1、，2.1、，2.2、，等等。最终效果可查看秋码记录文章详情页，右侧侧边栏目录。
- 2024-04-01
[前端]
网站引入 Prism，使得代码高亮显示，并一键复制代码块曾几何时，苦恼如何将本地写好的博文，更好的展示读者屏幕前？若只是简简单单的文章，其实还是很好的解决它的！可是，像我们这样写技术文章（有点牵强）的，在文章内容嵌入部分代码是在所难免的。然而，由于没能将代码与文本区分开来，致使两者混在一起，分不出彼此。由此给读者带来了视觉上得不适，它并没有很好的像代码编辑器那样高亮。下载 Prism 虽然市面上能让代码块高亮显示，远不止Prism这一款，而我又为什么选择这一款呢？这的确是个好问题，然而我只能回答您的是，它功能比较强大吧！（或许您还不能信服），这就好比是情人眼里出西施，您的老婆/老公或女朋友/男朋友长得不是那么美/那么帅（或许您在某一瞬间也是这么觉得），但是，您不还是选择了她/他吗？即便是，您和伴侣在逛街时，迎面走来一位身材高挑的美女/帅哥，想必您的伴侣是在您不经意间，偷瞄了一眼。进入prism官网下载： https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript 随后，我们在项目中引入Prism.css样式文件。 <link href="themes/prism.css" rel="stylesheet" /> 以及Prism.js文件。 <script src="prism.js"></script> 当然咯，您的代码块是需要使用<pre>和<code class="language-*"标签。 <pre><code class="language-html"> <link href="themes/prism.css" rel="stylesheet" /> </code></pre> 添加 clipboard 复制代码按钮若是有一点按钮就可以复制这段代码，想必应该是没有人会再去用鼠标去滑动选择代码，然后右键，选择复制选项，或者直接按住键盘上的Ctrl + C。首先，想要在项目中添加clipboard功能，那么，就显得下载它，这是毋庸置疑的！当然，我们还是到Prism官网下载它，在项目中引入： <script src="plugins/clipboard.js"></script> Hugo-theme-kiwi 中引入 Prism 首先，我们在Hugo-theme-kiwi主题的head.html文件引入blackmac.css样式文件。 <link rel="stylesheet" href="{{ .Site.BaseURL }}css/blackmac.css"> blackmac.css文件内容如下： code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;background:#313238;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:2;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}pre[class*="language-"]{padding:.5em;margin:.5em 0;overflow:auto;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#21252a}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999;}.token.punctuation{color:#ccc;}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a;}.token.function-name{color:#6196cc;}.token.boolean,.token.number,.token.function{color:#f08d49;}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555;}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd;}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699;}.token.operator,.token.entity,.token.url{color:#67cdcc;}.token.important,.token.bold{font-weight:bold;}.token.italic{font-style:italic;}.token.entity{cursor:help;}.token.inserted{color:green;}pre.line-numbers{padding-bottom:.8em;padding-left:3.3em;counter-reset:linenumber}pre.line-numbers>code{white-space:inherit font-size:15px}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:3em;font-size:100%;left:-0.1em;width:3em;letter-spacing:-1px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.9em;text-align:right;background:#272c33}div.code-toolbar{font-size:100%;border-radius:4px;position:relative;box-shadow:0 0 20px 5px rgba(0,0,0,.4);padding-top:30px;background-color:#161616;margin:20px 0 20px 0}.code-toolbar:before{content:" ";position:absolute;-webkit-border-radius:50%;border-radius:50%;background:#fc625d;width:11px;height:11px;left:10px;top:10px;-webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;z-index:2}div.code-toolbar>.toolbar{padding-right:.4em;position:absolute;top:.09em;right:.2em;width:100%;text-align:center;}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar>.toolbar .
- 2024-03-23
[前端]
ag-grid 右键单元格动态改变单元格样式
在window下安装最新Go语言开发包自定义单元格单击或右键时，给单元格添加不一样的样式而苦苦搜寻，可找了好久却好像都没有呢？巧了，笔者已经实现了这一看似很简单地功能！
- 2022-06-14
[前端 Vue]
自定义vxe-table表头标题文字过多，显示两行多余省略号并给出tooltip
自定义vxe-table表头标题文字过多，显示两行多余省略号并给出tooltip
- 2022-06-11
[前端 Vue]
Chrome扩展程序开发入门（基于 V3）
Chrome扩展指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工作在浏览器层面，使用 HTML + Javascript 语言开发[*]。比如著名的 Adblock plus。
- 2022-03-08
[前端 Chrome扩展]
BootstrapTable 动态显示/隐藏某一行
手写实现自动隐藏/显示BootstrapTable表格行
- 2021-05-23
[前端 Bootstraptable]
xhr模拟表单下载文件
使用javascript原生XHR下载流文件，可进行计时下载，当然也是可以通过from表单进行下载文件的，但页面可能会有跨域问题，索性就在PHP做个桥接处理了。
- 2021-04-25
[前端 javascript]
Extjs 3.3 tree以下的版本在IE10无法点击的解决办法
距上篇文章已过去好几天了，说好的一周发表1到3篇文章，难道都让狗吃了吗？现在才发布一篇而且还是转载的文章。好了，闲话少叙，切入正题，Extjs前端框架是比较早的前端mvc框架了，可能很多人都没接触过，而且现在也很少有项目用Extjs框架搭建了，原因是什么？那就不得而知了，有人说是Extjs比较重……
- 2019-04-24
[前端 extjs]
在npm上发布基于Vue2.x开发的UI组件库（记录篇）
解决Navicat12连接Oracle报oracle library is not loaded的提示问题基于Vue开发的UI组件库肯定是要公用的，虽然可以在每创建一个Vue项目时可以复制这些组件，如果组件比较大的情况下呢？是不是很不方便呢？
- 2019-02-25
[前端 node.js]

1
2

一个游离于山间之上的江湖漫行者。

A jungle wanderer who wanders above the mountains.

45 分类数

137 文章数

297 标签数

文章分类

云服务器 2
云计算 1
人工智能 20
前端 11
区块链 20
建站 6
微信小程序 3
智能合约 18
模板 1
海外云服务器 3
版本控制 4
生活情感 1
生活随笔 2
虚拟机 2

标签云

[{"abstract":1},{"ag-grid":1},{"ai":1},{"apache":1},{"array":1},{"autoninja":1},{"bootstraptable":1},{"branch":1},{"break":1},{"c++":3},{"canvas":1},{"cdn":1},{"centos":3},{"centos7":2},{"channel":3},{"chatgpt":1},{"chrome-v3":1},{"chrome扩展":1},{"clone":1},{"constant":1},{"continue":1},{"cos":1},{"css计算器":1},{"curl":1},{"dict":1},{"dom-to-image":1},{"error":1},{"event":1},{"extends":1},{"extjs":1},{"freemarker":1},{"gclient-sync":1},{"git":2},{"git-clone":1},{"git-push":1},{"gitee":1},{"github":5},{"global-variable":1},{"goland":1},{"golang":3},{"golang-sdk安装":1},{"goto":1},{"gulp":1},{"html2canvas":1},{"html转image":1},{"html转图片":1},{"https":2},{"https配置":1},{"hugo":5},{"ide":1},{"ie10兼容":1},{"immutable":1},{"interface":1},{"java8":2},{"java8新特性":1},{"jdk":1},{"jdk8":1},{"lambda":1},{"library":1},{"linux":5},{"list":1},{"liteide":1},{"machine-learning":11},{"mariadb":1},{"maven":1},{"mechine-learn":1},{"merge":1},{"modifier":1},{"moduels":1},{"mpvue":1},{"mysql":2},{"navicat12":1},{"nexus":1},{"nginx":4},{"nlp":2},{"nodejs":2},{"nosql":1},{"npm-adduser":1},{"npm发布项目":1},{"npm注册账号":1},{"oracle":1},{"oracle-library-is-not-loaded":1},{"oss":2},{"package":2},{"php":1},{"php-fpm":1},{"pipelines":1},{"pointer":1},{"prism":1},{"python":1},{"redis":2},{"remix":1},{"requirejs":1},{"scikit-learn":7},{"serverless":1},{"slice":1},{"springboot上传图片":1},{"ssl":1},{"struct":1},{"switch":1},{"tags":1},{"template":1},{"tensorflow":1},{"theme":5},{"thinkphp":1},{"thinkphp.1":1},{"timed-out":1},{"tomcat":1},{"tooltip":1},{"transformers":1},{"treepanel":1},{"type-alias":1},{"ubuntu-16.04lts":2},{"ubuntu18.04lts":3},{"ui框架":1},{"vagrant":2},{"virtualbox":2},{"visualstudio":1},{"vmware":2},{"vps":4},{"vs-code":2},{"vs2017":1},{"vs2019":1},{"vs2022":1},{"vxe-table":2},{"web3":2},{"while":1},{"wordpress":1},{"x-editable.js":1},{"ztree":1},{"一键复制":1},{"不甘心":1},{"个人博客":4},{"主题":1},{"事件":1},{"二维数组":1},{"二进制":1},{"云对象存储":2},{"云服务器":7},{"交叉验证":1},{"人工智能":9},{"代码块":1},{"代码高亮":1},{"以太坊":18},{"任务":2},{"便宜":1},{"信道":1},{"修饰器":1},{"值类型":1},{"全局变量":1},{"关键字":1},{"内存地址":1},{"内容分发":1},{"内容过多省略":1},{"决策树":1},{"函数":2},{"函数变量":1},{"函数式接口":2},{"分支":1},{"分类器":2},{"切片":1},{"列表":1},{"包":2},{"区块链":21},{"匿名函数":1},{"匿名变量":1},{"单元格单击":1},{"单向信道":1},{"博客主题":1},{"压缩文件":1},{"双十一":1},{"双向链表":1},{"变量作用域":1},{"召回率":2},{"可变参数":1},{"可变性":1},{"可见性":1},{"合约继承":1},{"命令行":1},{"回调函数":2},{"困惑":1},{"图片水印":1},{"在线学习":1},{"在线编辑器":1},{"域名":3},{"基于vue2.x的ui组件库":1},{"基本类型":2},{"备案":3},{"多值返回":1},{"多核":1},{"多线程":1},{"多维数组":1},{"大量数据处理":1},{"天气很好":1},{"奇果":1},{"字典":1},{"字符串":1},{"实战":2},{"实战项目":1},{"常量":1},{"年末总结":1},{"并发编程":1},{"序号":1},{"延迟执行":1},{"建站":1},{"开源大模型":1},{"异常":1},{"异常处理":1},{"异步加载树":1},{"引用类型":1},{"循环结构":1},{"微信小程序":1},{"托管平台":1},{"托管网站":1},{"批量学习":1},{"抽象合约":1},{"拖慢网站":1},{"拼团":1},{"指针":1},{"挑战":2},{"接受者":1},{"接口":2},{"接口转换":1},{"数据库":1},{"数据标注":1},{"数组":1},{"数组分组":1},{"文件上传":1},{"文件下载":1},{"文章分享":1},{"文章奴鲁":1},{"方法":1},{"方法集":1},{"映射":1},{"智能合约":18},{"本地仓库":1},{"机器学习":18},{"枚举类型":1},{"标签":1},{"标识符":1},{"模型":2},{"模板发送邮件":1},{"横向树状":1},{"池塘":1},{"流程控制":1},{"测试集":1},{"海报":1},{"深度学习":6},{"混肴矩阵":1},{"添加水印":1},{"版本控制":2},{"特征曲线":1},{"环境搭建":1},{"电商":2},{"登山":1},{"空接口":2},{"端到端":2},{"类型别名":1},{"类型推导":1},{"类型断言":1},{"类型转换":1},{"精确率":1},{"结构体":1},{"缓冲信道":1},{"编译chromium":3},{"网络":1},{"腾讯云":1},{"自定义提示":1},{"花鸟市场":1},{"菲关系型数据库":1},{"虚拟主机":1},{"虚拟化":1},{"表单":1},{"表格行内编辑":1},{"训练数据":2},{"训练模型":1},{"训练集":1},{"语法题":1},{"负重前行":1},{"超时":1},{"跑酷":1},{"跨越switch":1},{"转义符":1},{"远程仓库":1},{"部署静态网站":1},{"配置":1},{"错误分析":1},{"错误处理":2},{"闭包":1},{"防火墙":1},{"阿里云":3},{"阿里云oss":1},{"随机森林":1},{"隐藏/显示表格行":1},{"静态资源":1},{"预定义标识符":1},{"首页":1}]

Copyright © 2018 - 2024 by 秋码记录

Powered by Hugo V0.121.2 | Theme by hugo-theme-kiwi V0.0.12