当前位置: 首页 > news >正文

佛山做pc端网站诊断网站seo现状的方法

佛山做pc端网站,诊断网站seo现状的方法,一个网站的二级目录在另一台服务器上_怎么做,中山品牌网站建设推广在一个项目中,要求把少儿读本做成电子教材呈现出来,电子书的排版要求跟纸质书一致。其中,英语书有个需求:书中有些不规则排版的文本(如下图所示),当随书音频播放时,被读到的文本要求…

        在一个项目中,要求把少儿读本做成电子教材呈现出来,电子书的排版要求跟纸质书一致。其中,英语书有个需求:书中有些不规则排版的文本(如下图所示),当随书音频播放时,被读到的文本要求高亮。

        这个需求偏冷门,所以做了下调研...

一、排版方案选择

        文本的不规则排版,网上粗略搜到两种方案:

1)使用SVG的textPath来实现

2)对文本的每个字符计算坐标和旋转角度,然后用绝对定位展示

        方案1(SVG),不需要JS计算单个字符的位置,不会出现文字叠加、错位等问题。不过,网上能搜索到的相关代码都只是文本排版,并没有对每个单词绑定事件,所以需要自己对SVG有一定了解,能编写交互功能。

        方案2(计算坐标和旋转角度),用基本的JS知识即可实现,难点在于计算比较繁琐,容易出现文字叠加、错位、旋转角度不正确等问题。相关的插件有:vue-arc-text、jQuery.arctext.js等。(前者为Vue组件,配置简便,但不能对单词进行操控;后者依赖jQuery,需要的代码量貌似较多,与Vue格调也不搭,没有尝试的欲望;若自己用vue和js去实现这个思路,也繁琐,作为保底方案,实在不行再执行)

        最后,根据个人喜好,优先选择SVG来实现。

二、方案的实现

        2.1 基础代码

        网上轻易可搜到的环形文字示例代码:

<svg viewBox="0 0 300 150" height="150"><path id="zxxCircle" fill="none" d="M90 75a60 60 0 1 0 120 0a60 60 0 1 0 -120 0z"/><text><textPath href="#zxxCircle">网上找的一段环形文字代码</textPath></text>
</svg>

        2.2 相关知识点

        上述代码中涉及到的标签有:svg、path、text、textPath,其中path绘制了一条弧线路径(圆形),textPath通过href属性将内部文字排版与path路径绑定。开发时,主要调整的便是path标签的d属性(即弧线绘制)。

        1)path

`M/m (x,y)+`: 移动当前位置

`A/a (rx,ry,xr,laf,sf,x,y)+` : 从当前位置绘制弧线到指定位置

        rx - (radius-x)弧线所在椭圆的x半轴长

        ry - (radius-y)弧线所在椭圆的y半轴长

        xr - (xAxis-rotation)弧线所在椭圆的长轴角度

        laf - (large-arc-flag)是否选择弧长较长的那一段弧

        sf - (sweep-flag)是否选择逆时针方向的那一段弧

        x,y - 弧的终点位置

`z`: 路径闭合

        2)svg

        基本属性:fill(填充)、stroke(描边)、stroke-width、transform(变换),后续我们会用到transform属性。transform可用的属性:

`rotate(<deg>)*` - 旋转

`translate(<x>,<y>)*` - 偏移

`scale(<sx>,<sy>)*` - 缩放

`matrix(<a>,<b>,<c>,<d>,<e>,<f>)*` - 矩阵

        3)tspan

        textPath中是要排版的文本,因为要对每个单词单独做操控,所以需要用tspan标签对文本做拆分。

        2.3 效果实现

        真实项目分为管理端和客户端。管理端,可将弧线的每个参数都暴露出来自定义设置;客户端,仅用作展示。

        此处,Demo我稍微简化了下设置项。效果如下:

        Html关键代码:

<svg :viewBox="svgInfo.viewBox" :transform="svgInfo.transform"><path id="zxxPath" fill="none" :d="svgInfo.d" /><text><textPath href="#zxxPath"><tspan v-for="(v,i) in wordList" :key="i":class="{active: i === tspanActiveIndex}" @click="tspanClickHandler(v,i)"><tspan v-for="(v1,i1) in v.split('')" :key="`${i}_${i1}`" :class="{'active-letter': v1 === letterActive}">{{ v1 }}</tspan>&#160;</tspan></textPath></text>
</svg>

        JS关键代码:

computed: {wordList () {return this.text.split(' ')},svgInfo () {let result = {viewBox: '0 0 0 0', d: '', transform: 'translate(0,0)'}let x = Math.max(this.startX, this.stopX)let y = Math.max(this.startY, this.stopY)result.viewBox = `0 0 ${x} ${y}`result.transform = `translate(${this.translateX},${this.translateY})`result.d = `M${this.startX},${this.startY} A${this.radius},${this.radius},0,${this.isLong ? 1 : 0},${this.direct},${this.stopX},${this.stopY}`return result}
},

        CSS关键代码:

svg {width: 100%;height: 100%;textPath {> tspan {fill: #333;cursor: pointer;.active-letter {fill: #eb6525;}&.active {animation: myanimation .25s linear forwards;.active-letter {fill: inherit;}}}}
}
@keyframes myanimation {from {fill: #333;text-shadow: 0 0 2px #333;}to {fill: red;text-shadow: 0 0 0 yellow;}
}

三、总结

        1)参数设置的input标签建议type设置为number,这样用户可以按键盘上的上下箭头来调整数字,结合vue,可以即时看到文字排版效果;

        2)svg中标签的style属性和html中存在差异,不支持transform(svg中的transform是单独的属性)。如果想用纯CSS对文字做动画,能操作的只有:font-size、font-style、font-weight、text-shadow、fill等。因为font-size和font-weight会影响后面文本的排版,所以Demo中我是用fill和text-shadow做的简易动效。

http://www.ritt.cn/news/20079.html

相关文章:

  • 公司网站设计师百度影音在线电影
  • 密云网站建设关键字排名优化公司
  • java做网站导航栏个人建网站需要多少钱
  • 页面模板分类名无法编辑win7优化大师
  • 物流网站建设费用韶关新闻最新今日头条
  • 编程软件下载手机版seo是什么味
  • 独立购物网站全球疫情最新消息
  • 山东省建设厅网站 - 百度中文域名交易平台
  • 自己做交友网站上海seo推广方法
  • 福田网站制作报价陕西seo排名
  • 系统下载网站源码深圳招聘网络推广
  • vr模式的网站建设公司线上营销怎么推广
  • 网站开发ppt网站一级域名和二级域名
  • 网站购物车怎么做网站建设企业建站
  • 成都网站设计开发做得好优化营商环境指什么
  • 怎么在网站里做宣传新闻网站软文平台
  • 用什么技术可以做web网站整站优化服务
  • php学校网站系统百度网站管理员工具
  • 怎样入驻微信小程序知名的seo快速排名多少钱
  • 通辽做网站网时代教育培训机构官网
  • 做网站java好还是phpseo论坛站长交流
  • 泰安做网站公司哪家好百度高级检索入口
  • 满18点此转入2o2新乡seo公司
  • 政府门户网站建设问题重庆seo整站优化报价
  • 南充哪里做网站seo在线优化排名
  • 珠宝网站源码免费下载正安县网站seo优化排名
  • 想把比尔的网站封了如何做全球网站排行榜
  • 网站建站实训总结建网站找谁
  • 政府部门如何建设网站百度小说搜索热度排行榜
  • 做网站后台用什么语言网页优化公司