Colorful-childhood/component/welCropper/welCropperUtil.js

// 获取选中区域的(x, y, w, h)
const getCropRect = (cropperMovableItems) => {
    let maxX = 0, maxY = 0
    for (let key in cropperMovableItems) {
        let item = cropperMovableItems[key]
        maxX = Math.max(item.x, maxX)
        maxY = Math.max(item.y, maxY)
    }

    let minX = maxX, minY = maxY
    for (let key in cropperMovableItems) {
        let item = cropperMovableItems[key]
        minX = Math.min(item.x, minX)
        minY = Math.min(item.y, minY)
    }

    return {
        x: minX,
        y: minY,
        w: maxX - minX,
        h: maxY - minY
    }
}

// 获取适应屏幕的图片显示大小
const getAdjustSize = (W, H, width, height) => {
    if (width > W) {
        height = W / width * height
        width = W
    }

    if (height > H) {
        width = H / height * width
        height = H
    }

    return {
        width: width,
        height: height
    }
}

// http://www.geeksforgeeks.org/convex-hull-set-1-jarviss-algorithm-or-wrapping/

// To find orientation of ordered triplet (p, q, r).
// The function returns following values
// 0 --> p, q and r are colinear
// 1 --> Clockwise
// 2 --> Counterclockwise
function orientation(p, q, r) {
    var val = (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y);

    if (val == 0) return 0;  // collinear
    return (val > 0) ? 1 : 2; // clock or counterclock wise
}

// Prints convex hull of a set of n points.
function convexHull(points, n) {
    // There must be at least 3 points
    if (n < 3) return;

    // Initialize Result
    var hull = [];

    // Find the leftmost point
    var l = 0;
    for (var i = 1; i < n; i++) {
        if (points[i].x < points[l].x) {
            l = i;
        }
    }
    // Start from leftmost point, keep moving 
    // counterclockwise until reach the start point
    // again. This loop runs O(h) times where h is
    // number of points in result or output.
    var p = l, q;
    do {
        // Add current point to result
        // Prevent duplicates object
        // if (hull.findIndex(i => i.x == points[p].x && i.y == points[p].y)==-1){
        hull.push(points[p]);
        // }

        // Search for a point 'q' such that 
        // orientation(p, x, q) is counterclockwise 
        // for all points 'x'. The idea is to keep 
        // track of last visited most counterclock-
        // wise point in q. If any point 'i' is more 
        // counterclock-wise than q, then update q.
        q = (p + 1) % n;

        for (var i = 0; i < n; i++) {
            // If i is more counterclockwise than 
            // current q, then update q
            if (orientation(points[p], points[i], points[q]) == 2)
                q = i;
        }

        // Now q is the most counterclockwise with
        // respect to p. Set p as q for next iteration, 
        // so that q is added to result 'hull'
        p = q;

    } while (p != l);  // While we don't come to first 
    // point

    // Print Result
    // for (var i in hull) {
    //     var temp = hull[i]
    //     console.log("(" + temp.x + ", " + temp.y + ")");
    // }
    return hull
}

function drawImageWithDegree(ctx, path, width, height, degree) {
    let isVertical = degree % 180 > 0

    let drawWidth = isVertical ? height : width
    let drawHeight = isVertical ? width : height

    let centerX = width / 2
    let cneterY = height / 2

    let drawCenterX = drawWidth / 2
    let drawCneterY = drawHeight / 2

    let d = Math.abs(width - height) / 2

    // ctx.translate(drawCenterX, drawCneterY)
    // ctx.rotate(degree * Math.PI / 180)
    // ctx.translate(-drawCenterX, -drawCneterY)

    ctx.translate(centerX, cneterY)
    ctx.rotate(degree * Math.PI / 180)
    ctx.translate(-centerX, -cneterY)

    // ctx.translate(-d, d)
    if (isVertical) {
        if (drawHeight > drawWidth) {
            ctx.drawImage(path, d, -d, drawWidth, drawHeight)
        }
        else {
            ctx.drawImage(path, -d, d, drawWidth, drawHeight)
        }
    }
    else {
        ctx.drawImage(path, 0, 0, drawWidth, drawHeight)
    }

    ctx.draw(false, function (e) {
        console.log('draw callback')
    })
}

// 查找topleft的点
function findTopLeft(items) {
    let x = items.topleft.x, y = items.topleft.y
    for (let i in items) {
        let item = items[i]
        if (x > item.x) {
            x = item.x
        }
        if (y > item.y) {
            y = item.y
        }
    }
    return {
        x, y
    }
}

module.exports = {
    getCropRect,
    getAdjustSize,
    convexHull,
    drawImageWithDegree,
    findTopLeft
}