最近有一个一体机前端展示项目,首页页面样式中碰一个问题: 需要对部分文字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;记录一下,以后需要用到时方便回来查看.
大部分地图框架的地图对象都会有一个方法是设置地图当前显示范围
如高德地图:setBounds(bound:Bounds) // 指定当前地图显示范围，参数bounds为指定的范围
我们只需要传入希望地图显示的范围区域,地图框架自动计算合适的center 中心点 和zoom 层级
但是有时候我们做地图展示页面,而为了美观我们会把地图设置为整个屏幕,对应的窗体浮动显示在地图上层.
如图
地图的实际有效范围只在中间这部分.
通过有效范围在实际地图容器中的位置,宽高比值,我们根据希望实际显示容器中的范围计算得到修正后的真实显示范围,
然后调用地图显示范围时传入真实显示范围后,在实际显示区域中则会刚好是我们希望地图显示的范围区域.
这里记录一下核心代码:
/**
* 返回修正后的Bounds范围:
* 地图区域有遮挡或者其他内容时,传入目标返回以及偏移值,返回修正后的范围
* 主要和map.setBounds方法配合使用.
* @param {AMap.Bounds} sourceBound
* @param {Number} left 地图显示有效区域距离实际地图容器左侧比例
* @param {Number} top 地图显示有效区域距离实际地图容器上方比例
* @param {Number} width 地图显示有效宽度与实际地图容器宽度比值
* @param {Number} height 地图显示有效高度与实际地图容器高度比值
*/
export function getFixMapBound(sourceBound, left, top, width, height) {
let minPoint = sourceBound.getSouthWest()
let maxPoint = sourceBound.getNorthEast()
// 计算出原区域的经纬度差值
let subX = maxPoint.getLng() - minPoint.getLng()
let subY = maxPoint.getLat() - minPoint.getLat()
let addX = subX / width - subX // 总共需要增加的经度值
let addY = subY / height - subY // 总共需要增加的维度值
let topY = subY * top / height // 头部维度差值
let leftX = subX * left / width // 左边经度差值
let rightX = addX - leftX
let bottomY = addY - topY
let minXY = [minPoint.getLng() - leftX, minPoint.getLat() - bottomY]
let maxXY = [maxPoint.getLng() + rightX, maxPoint.getLat() + topY]
return new AMap.Bounds(minXY, maxXY)
}以上是高德的修复Bounds范围的代码,改成其他地图框架只要根据其他地图框架的实际对象,微调AMapBounds,maxPoint和minPoint即可.
以下是调用代码的简易代码.
var bounds = xxxx // 希望地图显示的范围区域
// 根据希望显示的范围区域,拿到实际地图应该传入的修正区域
var fixBounds = getFixMapBound(
bounds,
0.25, // 有效区域距离地图容器左边是25%距离
0.1, // 有效区域距离地图容器上方是10%距离
0.5, // 有效区域的宽度与实际地图容器的宽度比值为0.5 : 1
0.9 // 有效区域的高度与实际地图容器的高度比值为0.9 : 1
)
map.setBounds(fixBounds) // 让地图根据修正后的区域设置显示范围,则地图的有效范围刚好是显示bounds的范围区域getFixMapBound方法也支持负数.
之前fiddler一直没法抓https的包,导致很长一段时间都是直接用chrome开发者工具看网络请求,但是chrome没法在程序中设置代理查看自己发送的数据包和对方的差异,以及一些拦截/修改报文的功能无法实现.导致使用上肯定比不上fiddler方便.
看了https://www.cnblogs.com/joshua317/p/8670923.html的文章,总算是可以抓https的包了,在此表示感谢,记录一下以便后面自己查阅.
没什么好说的,删了就是了,注意Administrator根据自己用户的名字进行修改.
没什么好说的,全部删就是了, 打开证书管理器后 找到菜单里的操作 -> 查找所有证书, 包含输入fiddler后点击立即查找
一般来说第2步完成后,浏览器上就不存在fiddler的文件了,为了确保没有问题.可以在浏览器的设置里找到证书管理的选项,删除所有包含fiddlerRoot的证书.
到这步浏览器的受信任根证书颁发机构里应该就会自动生成fiddler的证书了,如果还是抓不了https的包,那么点actions手动导出证书到桌面,然后手动导入到浏览器中试试.
http://www.telerik.com/docs/default-source/fiddler/addons/fiddlercertmaker.exe?sfvrsn=2
最近一直在开发浙江省消防项目,过程中遇到一个问题:消防网格与行政网格并非完全一致,存在要增加一个单独的区或者在某个区扣除部分街道出来.
(比如以前一个市下面有5个区A,B,C,D,E.现在要增加一个区F,F下有4个街道,分别从D,E两个区里面拿街道.类似这样的需求)想要自己分析每个区下面的街道网格去合并生成一个新的区,非常慢,并且一不小心就容易出错.经过需求分析发现真正需求就是编辑线段:可对线段进行擦除或者对多条线段进行合并.
其中导入的线段格式是 x1,y1;x2,y2;x3,y3;...xn,yn;
将来再看是否有新需求考虑增加功能
代码不介绍了,给个github地址给需要的人.
在线编辑地址demo
==================================================================================
后面又增加了锁定线段及批量导出功能
css3中有属性filter专门去处理一些滤镜效果, 其中 blur(20px)代表高斯模糊(20px代表20个像素点混合) .
如果想实现下图效果则需要用点非常规的办法
<div class="container">
<div class="content">
<h1>弹出信息</h1>
<p>巴拉巴拉巴拉巴拉</p>
</div>
</div>* {
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; /* 让模糊部分背景置于内容前方 */
}