分类 技术文章 下的文章

在保存图片到相册后,微信会弹出提示“图片已保存到xxxxxx”,如果在saveImageToPhotosAlbumsuccess中想要提示用户保存成功,就必须先调用hideLoading(),否则自己写的showToast是不会显示的。

wx.saveImageToPhotosAlbum({
    success(res) {
        wx.hideLoading();  // 必须先调用这个
        wx.showToast({
            title: '图片已保存到您的相册',
            icon: 'none',
            duration: 4000
        });
    }
})

前言

由于移动端屏幕的像素密度都非常高,css中的1px呈现在屏幕中,往往不止1个物理像素,看起来比较粗,设计师很难满意。这和devicePixelRatio有关。
transform实现看起来比较细的边框是一个很简单的方案,在移动端兼容性也非常好,不需要多余的资源,当然,肯定要多些几行代码。


- 阅读剩余部分 -

1、defaultValue

HTML

<input type="text" value="Hello world">

JavaScript

const input = document.querySelector('input');

console.log(input.value);        // 'Hello world'

input.value = 'New value';

console.log(input.value);        // 'New value'
console.log(input.defaultValue); // 'Hello world'

如代码所示,当用JavaScript改变了inputvalue后,可以使用defaultValue来获取这个元素的初始值。

- 阅读剩余部分 -

在线演示:

Demo for article: SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio

以下内容都是基于preserveAspectRatio为默认状态时的情况,也就是不考虑preserveAspectRatio。

为什么设置viewBox的min-x, min-y后,如果设置的是正值,图像反而会向左/上移动,而设置负值则向右/下移动呢?
我是这么理解的:

  1. viewBox的左上角总是和视窗的左上角对齐。
  2. 在设置viewBoxmin-xmin-y后,

    1. 首先,图像的位置并不会移动;
    2. 如果设置的为正值,viewBox的起点就会向右/下移动;
    3. 由于图像位置不变,还是基于视窗的左上角,所以图像会被裁切。如果设置的是负值,就相当于PS中扩展画布左/上会填充空白。
    4. 之后,viewBox的起点会移动到视窗的原点位置,所以,如果设置的值是正值,图像就会被裁切,而如果设置的是负值,就会发现图像左左侧/上侧填充了空白。
    5. viewBox起点与视窗的起点对齐,这时候就出现了文章开始让人疑惑的现象。

这里有张鑫旭的文章,讲解的非常透彻
理解SVG viewport,viewBox,preserveAspectRatio缩放 张鑫旭