月度归档： 2020年12月

之前做过的彩票项目中用到了排列和组合公式，分享给需要的人。

/**
         * 排列结果  包括重复内容
         */
        arrCPermute: function (arr, num) {
            var r = [];
            (function f(t, a, n) {
                if (n == 0) return r.push(t);
                for (var i = 0, l = a.length - n; i <= l; i++) {
                    f(t.concat(a[i]), a.slice(i + 1), n - 1);
                }
            })([], arr, num);
            return r;
        },
        /**
         *  排列结果  不包括重复内容
         */
        arrCPermute1: function (arr, num) {
            var r = [];
            (function f(t, a, n) {
                if (n == 0) return r.push(t);
                for (var i = 0, l = a.length; i < l; i++) {
                    f(t.concat(a[i]), a.slice(0, i).concat(a.slice(i + 1)), n - 1);
                }
            })([], arr, num);
            return r;
        },
        /**
         * 排列公式（从n个不同元素中取出m个元素的组合数）
         * @param n
         * @param m
         * @returns {number}
         */
        mathP: function (n, m) {
            var c = 1;
            for (var i = n - m; i < n; c *= ++i);
            return c;
        },
        /**
         * 组合公式（从n个不同元素中取出m个元素的组合数）
         * @param n
         * @param m
         * @returns {number}
         */
        mathC: function (n, m) {
            var n1 = 1,
                n2 = 1;
            for (var i = n, j = 1; j <= m; n1 *= i--, n2 *= j++);
            return n1 / n2;
        },

双色球计算组合时可以这样使用

lotNum = util.mathC(redNum, 5) * util.mathC(blueNum, 2); //红球的组合*篮球的组合

业务需求：在微信小程序内的商家入驻协议页面的下面设置一个空白区域，可以让用户在手机屏幕上进行手指滑动，从而实现手写签名的功能。

设计思路：
1 创建一个canvas对象
2 监听用户手指触摸事件bindtouchstart=”start”
3 开始触摸时保存坐标x,y
4 触摸移动时bindtouchmove=”move” 执行绘制操作ctx.stroke
5 保存图片通过wx.canvasToTempFilePath把临时路径返回出去用户上传接口使用

全部代码：

WXML

<view>
   <canvas 
    class="c-autograph"
    style="width:{{canvasW}}px;height:{{canvasH}}px;"
    canvas-id="autograph" 
    bindtouchcancel="cancel" 
    bindtouchmove="move" 
    bindtouchstart="start" 
    bindtouchend="end" 
    bindlongtap="longtap" 
    disable-scroll="true" 
    binderror="error"
    ></canvas>
</view>

JS

/*
 * @Author: liuxiaofan
 * @Description: v2.0.0
 * @Date: 2020-03-10 15:56:34
 * @LastEditors: liuxiaofan
 * @LastEditTime: 2020-04-20 15:40:55
 */
// 采坑： 如果html标签里面写了 type="2d"，会导致真机空白
var ctx = null; //canvas实例
var touchs = [];
Component({
    properties: {

    },
    data: {
        canvasW: 140,
        canvasH: 56,
        lineColor: '#333', // 笔划的颜色
        LineWidth: 3, //笔划粗细
        count: 0 //画了几笔
    },
    ready() {
        this.autoWidth()
        this.init()
    },
    methods: {
        autoWidth() {
            const dpr = wx.getSystemInfoSync().pixelRatio // 获取设备的屏幕分辨率是2x还是3x
            let canvasW, canvasH;
            if (dpr >= 2) {
                canvasW = this.data.canvasW * 2
                canvasH = this.data.canvasH * 2
            }
            if (dpr >= 3) {
                canvasW = this.data.canvasW * 2.21
                canvasH = this.data.canvasH * 2.21
            }
            
            // 最近小高度100
            if (canvasH < 100) {
                canvasH = 100
            }
            
            if (canvasW < 280) {
                canvasW = 280
            }

            this.setData({
                canvasW,
                canvasH,
            })
        },
        init: function (options) {
            ctx = wx.createCanvasContext('autograph', this); // 如果是组件的形式，第2个参数要写this
            ctx.setStrokeStyle(this.data.lineColor);
            ctx.setLineWidth(this.data.LineWidth);
            ctx.setLineCap('round'); // 笔触形态
            ctx.setLineJoin('round'); // 交叉点形态
        },
        // 画布的触摸移动开始手势响应
        start: function (event) {
            // console.log("触摸开始" + event.changedTouches[0].x);
            // console.log("触摸开始" + event.changedTouches[0].y);
            //获取触摸开始的 x,y
            let point = { x: event.changedTouches[0].x, y: event.changedTouches[0].y }
            touchs.push(point);
        },
        // 画布的触摸移动手势响应
        move: function (e) {
            let point = { x: e.touches[0].x, y: e.touches[0].y }
            touchs.push(point);
            if (touchs.length >= 2) {
                this.draw(touchs);
            }
        },
        // 画布的触摸移动结束手势响应
        end: function (e) {
            this.setData({
                count: this.data.count + 1
            })
            // console.info("触摸结束" + this.data.count);
            //清空轨迹数组
            for (let i = 0; i < touchs.length; i++) {
                touchs.pop();
            }

        },
        // 画布的长按手势响应
        longtap: function (e) {
            // console.log("长按手势" + e);
        },
        cancel() { },
        error: function (e) {
            // console.log("画布触摸错误" + e);
        },
        //绘制
        draw: function (touchs) {
            let point1 = touchs[0];
            let point2 = touchs[1];
            // console.info(point1, point2)
            touchs.shift();
            ctx.moveTo(point1.x, point1.y);
            ctx.lineTo(point2.x, point2.y);
            ctx.stroke();
            ctx.draw(true);
        },
        //清除操作
        clearClick: function () {
            //清除画布
            ctx.clearRect(0, 0, 750, 700);
            ctx.draw(true);
            this.setData({
                count: 0
            })
        },
        //保存图片
        saveClick: function (callback) {
            if (this.data.count < 3) {
                wx.showModal({
                    title: '提示',
                    content: '签名不符合规范，请重新签名',
                    showCancel: false
                })
            } else {
                wx.canvasToTempFilePath({
                    canvasId: 'autograph',
                    fileType: 'jpg',
                    destWidth: 800,
                    destHeight: 500,
                    success: function (res) {
                        callback && callback(res.tempFilePath) //把图片路径回调出去
                    },
                    fail(res) {
                        console.info('保存失败', res)
                    }
                }, this)
            }

        }
    }
})

在父组件内的使用方式

this.selectComponent("#autograph").saveClick(function (tempFilePath) {
           that.creatMerchant(tempFilePath)

       })

postion 属性值共有6个：

1. position: static // 默认值
2. position: inherit // 继承父元素的postion值
3. position: relative // 相对定位，遵循文档流
4. position: absolute // 绝对定位，脱离文档流
5. position: fixed // 固定定位
6. position: sticky // 粘性定位

sticky是CSS规范中新加入的一个属性值。
这个属性值的作用表现为当一个列表元素位于一个可滚动区域内时，当滚动到特定的位置，例如顶部的时候，就会触发fixed特性，固定在顶部这样。
粘性定位的应用场景随处可见，例如segmentfault的文章页面中，顶部的导航条就使用了sticky。或者很多新闻类的app里面的粘性标题栏等等。

代码示例：

HTML

<main>
       <header>标题一</header>
       <div class="content">
       </div>
       <header>标题二</header>
       <div class="content">
       </div>
       <header>标题三</header>
       <div class="content">
       </div>
       <header>标题四</header>
       <div class="content">
       </div>
   </main>

CSS

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}

JS

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
let contentsDom = document.getElementsByClassName('content')
let contentsArr = [...contentsDom]
contentsArr.forEach(item => {
    item.innerHTML = html
})

原生DOM元素通常使用document下的querySelectorAll、getElementsByClassName等方法获取。
这样的DOM对象被称为NodeList。不能使用数组的方法进行操作，例如forEach（）。

NodeList 不是一个数组，是一个类似数组的对象(Like Array Object)。虽然 NodeList 不是一个数组，但是可以使用 Array.from() 将其转换为数组。
除了Array.from之外还可以使用下面3种方式转换

• Array.apply(null,contentsDom)
• Array.prototype.slice.call(contentsDom)
• […contentsDom]

代码示例：

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
let contentsDom = document.getElementsByClassName('content')
let contentsArr=Arry.from(contentsDom)
let contentsArr=Array.apply(null,contentsDom)
let contentsArr=Array.prototype.slice.call(contentsDom)
let contentsArr = [...contentsDom]

contentsArr.forEach(item => {
    item.innerHTML = html
})