分类 默认分类 下的文章

转置文字显示方向问题

最近有一个一体机前端展示项目,首页页面样式中碰一个问题: 需要对部分文字90度旋转显示:
嵊州首页

第一个想法是通过 transform rotate(-90deg)对整个文字标签进行旋转.后来发现,旋转中心点的调整会有一点问题:必须在文字末尾的中心点transform-origin: center bottom;,实际操作会发现文字最终所在位置很难是整个外部dom的居中样式.如果想通过transform去做旋转操作的话,可能需要对每个文字做处理生成一个标签包裹
如:

<span>C</span><span>h</span><span>a</span><span>r</span>

我先在google上搜索了一下其他人文字转置的常用做法,发现了一个新的style样式:writing-mode
这个样式真的太适合用在这里了. 我用的是writing-mode: vertical-lr;记录一下,以后需要用到时方便回来查看.

caniuse

fiddler 抓取https 设置步骤

之前fiddler一直没法抓https的包,导致很长一段时间都是直接用chrome开发者工具看网络请求,但是chrome没法在程序中设置代理查看自己发送的数据包和对方的差异,以及一些拦截/修改报文的功能无法实现.导致使用上肯定比不上fiddler方便.
看了https://www.cnblogs.com/joshua317/p/8670923.html的文章,总算是可以抓https的包了,在此表示感谢,记录一下以便后面自己查阅.

1.清除C:UsersAdministratorAppDataRoamingMicrosoftCryptoRSA 目录下所有文件

没什么好说的,删了就是了,注意Administrator根据自己用户的名字进行修改.

2.清除电脑上的根证书,WIN+R快捷键,输入:certmgr.msc,查找所有fiddler证书,然后删除

没什么好说的,全部删就是了, 打开证书管理器后 找到菜单里的操作 -> 查找所有证书, 包含输入fiddler后点击立即查找

3.清楚浏览器上的证书文件

一般来说第2步完成后,浏览器上就不存在fiddler的文件了,为了确保没有问题.可以在浏览器的设置里找到证书管理的选项,删除所有包含fiddlerRoot的证书.

4.打开fiddler tools->options,允许https连接打上勾,(忽略服务器错误可以打勾)然后点击actions,最后一项重置证书.reset all certificates,然后关闭

到这步浏览器的受信任根证书颁发机构里应该就会自动生成fiddler的证书了,如果还是抓不了https的包,那么点actions手动导出证书到桌面,然后手动导入到浏览器中试试.

注意了,还是抓不到包的话,请查看一下自己浏览器或者操作系统是否有挂载什么代理.比方说因为众所周知的原因不能访问谷歌搜索而不得不安装的什么东西,记得要查一下谷歌里面的关于proxy的插件哦.可能你不小心装的.

听说还有一个叫证书生成器的东西,我已经解决了,就没有继续折腾了.放个链接已被不时之需

http://www.telerik.com/docs/default-source/fiddler/addons/fiddlercertmaker.exe?sfvrsn=2

基于高德地图对线段擦除以及合并功能

最近一直在开发浙江省消防项目,过程中遇到一个问题:消防网格与行政网格并非完全一致,存在要增加一个单独的区或者在某个区扣除部分街道出来.
(比如以前一个市下面有5个区A,B,C,D,E.现在要增加一个区F,F下有4个街道,分别从D,E两个区里面拿街道.类似这样的需求)想要自己分析每个区下面的街道网格去合并生成一个新的区,非常慢,并且一不小心就容易出错.经过需求分析发现真正需求就是编辑线段:可对线段进行擦除或者对多条线段进行合并.

然后怎样都搜索不到有线段擦除,合并的功能,于是只能自己开发.花了两天时间总算将就开发了一个可以用的功能.里面包含导入线段,线段擦除,线段合并,线段反序(合并的时候可能会用到,要保证所有线段方向的一致性,每条线段都是A线段尾部连接B线段头部),线段合并预览(当有3条及以上线段进行合并时,没有预览很容易出错:多条线段合并是有顺序的)

其中导入的线段格式是 x1,y1;x2,y2;x3,y3;...xn,yn;

将来再看是否有新需求考虑增加功能
代码不介绍了,给个github地址给需要的人.

在线编辑地址demo

==================================================================================
后面又增加了锁定线段及批量导出功能

磨砂玻璃效果开发

css3中有属性filter专门去处理一些滤镜效果, 其中 blur(20px)代表高斯模糊(20px代表20个像素点混合) .

如果想实现下图效果则需要用点非常规的办法

请输入图片描述

上图实现方法是 背景图+中间磨砂的图片+ 弹出内容

body内标签

  <div class="container">
    <div class="content">
      <h1>弹出信息</h1>
      <p>巴拉巴拉巴拉巴拉</p>
    </div>
  </div>

css代码

* {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100vw;
      height: 100vh;
      position: relative;
      background: url('http://qn.fengyitong.name/1.jpg') center / cover fixed;
      /* 
      上面拆分开来的写法
      background-image: url('http://qn.fengyitong.name/1.jpg'); 
      background-attachment: fixed;
      background-size: cover;
      background-position: center; */
    }

    .content {
      position: absolute;
      left: 50%;
      top: 30%;
      margin-left: -150px;
      width: 300px;
      height: 300px;
      background: hsla(0, 0%, 100%, 0.3);
    }

    .content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      filter: blur(20px); /* 对于中间的内容部分的背景进行高斯模糊 */
      background: url('http://qn.fengyitong.name/1.jpg') center / cover fixed;
      z-index: -1;    /* 让模糊部分背景置于内容后方 */
      margin: -30px; /* 保证边缘部分进行高斯模糊 */
    }

    .content {
      overflow: hidden; /* 超出的部分隐藏(模糊部分margin会导致超出) */
      z-index: 1; /* 让模糊部分背景置于内容前方 */
    }

以上可以实现一个全屏的背景+中间磨砂效果,但是如果说我们想要一个非全屏的背景,中间磨砂效果的话(即container的宽高不是满屏),这个css要如何做出这效果我没想到,想到最简单的办法可能是要用canvas去辅助实现生成背景图片.后面如果有时间的话我再补上这块的js代码.

在Markdown的表格中的行内代码里输入转义字符

今天在写API文档的时候碰到需要在表格中填 |,但是markdown本身的表格|代表分割线
在表格中需要用&#124;代替,但是本身又想用行内代码包裹使得样式好看
最终解决方案:

|  名称 |  说明 |
| ------------ | ------------ |
| xxx| 分隔符: <code>&#124;</code> |