Javascript 范围内的作物线

我有一张图表和一条回归线（蓝色的）。 现在，线条的端点可以从具有尺寸（

x0，x1，y0，y1

）的黑色矩形中退出

我想蓝色的线只显示在黑色的矩形内。 我该怎么办

我知道的坐标是：

x0

，

x1

，

y0

，

y1

，

A

和

B

。 我想知道

C

和

D

的坐标。我需要帮助

---

下面是Liang–Barsky的javascript实现。它还使用变量名运行示例计算：

var x0 = 0;
var y0 = 0;
var x1 = 640;
var y1 = 480;
var xa = 20;
var ya = -40;
var xb = 680;
var yb = 460;

// JS port of https://github.com/w8r/liang-barsky/blob/master/src/liang-barsky.ts

const EPSILON = 1e-6;
const INSIDE = 1;
const OUTSIDE = 0;

/**
 * @param {Number} num
 * @param {Number} denom
 * @param {Number[]} c result [x,y]-array
 */
function clipT(num, denom, c) {
    const [tE, tL] = c;
    if (Math.abs(denom) < EPSILON) return num < 0;
    const t = num / denom;

    if (denom > 0) {
        if (t > tL) return 0;
        if (t > tE) c[0] = t;
    } else {
        if (t < tE) return 0;
        if (t < tL) c[1] = t;
    }
    return 1;
}

/**
 * @param {Number[]} a [x,y]-array
 * @param {Number[]} b [x,y]-array
 * @param {Number[]} box [xmin, ymin, xmax, ymax]-array
 * @param {Number[]} da result [x,y]-array
 * @param {Number[]} db result [x,y]-array
 * @return {Number} Returns OUTSIDE or INSIDE
 */
function clip(a, b, box, da = null, db = null) {
    const [x1, y1] = a;
    const [x2, y2] = b;
    const dx = x2 - x1;
    const dy = y2 - y1;

    if (da === undefined || db === undefined) {
        da = a;
        db = b;
    } else {
        da[0] = a[0];
        da[1] = a[1];
        db[0] = b[0];
        db[1] = b[1];
    }

    if (Math.abs(dx) < EPSILON && Math.abs(dy) < EPSILON && x1 >= box[0] && x1 <= box[2] && y1 >= box[1] && y1 <= box[3]) {
        return INSIDE;
    }

    const c = [0, 1]; // Point
    if (clipT(box[0] - x1, dx, c) && clipT(x1 - box[2], -dx, c) && clipT(box[1] - y1, dy, c) && clipT(y1 - box[3], -dy, c)) {
        const [tE, tL] = c;
        if (tL < 1) {
            db[0] = x1 + tL * dx;
            db[1] = y1 + tL * dy;
        }
        if (tE > 0) {
            da[0] += tE * dx;
            da[1] += tE * dy;
        }
        return INSIDE;
    }
    return OUTSIDE;
}

var da = [null, null];
var db = [null, null];
var res = clip([xa, ya], [xb, yb], [x0, y0, x1, y1], da, db);

var [xc, yc] = da;
var [xd, yd] = db;
console.log(res, xc, yc, xd, yd);

var x0=0；
var y0=0；
var-x1=640；
变量y1=480；
var xa=20；
var-ya=-40；
var xb=680；
var yb=460；
//JS港口https://github.com/w8r/liang-barsky/blob/master/src/liang-barsky.ts
常数ε=1e-6；
内部常数=1；
外部常数=0；
/**
*@param{Number}num
*@param{Number}denom
*@param{Number[]}c结果[x，y]-数组
*/
函数clipT（num、denom、c）{
常数[tE，tL]=c；
if（Math.abs（denom）0）{
如果（t>tL）返回0；
如果（t>tE）c[0]=t；
}否则{
如果（t=box[0]&&x1=box[1]&&y10）{
da[0]+=tE*dx；
da[1]+=tE*dy；
}
返回内部；
}
返回外部；
}
var da=[null，null]；
var db=[null，null]；
var res=片段（[xa，ya]，[xb，yb]，[x0，y0，x1，y1]，da，db）；
var[xc，yc]=da；
var[xd，yd]=db；
日志（res、xc、yc、xd、yd）；

下面是Liang–Barsky的javascript实现。它还使用变量名运行示例计算：

var x0 = 0;
var y0 = 0;
var x1 = 640;
var y1 = 480;
var xa = 20;
var ya = -40;
var xb = 680;
var yb = 460;

// JS port of https://github.com/w8r/liang-barsky/blob/master/src/liang-barsky.ts

const EPSILON = 1e-6;
const INSIDE = 1;
const OUTSIDE = 0;

/**
 * @param {Number} num
 * @param {Number} denom
 * @param {Number[]} c result [x,y]-array
 */
function clipT(num, denom, c) {
    const [tE, tL] = c;
    if (Math.abs(denom) < EPSILON) return num < 0;
    const t = num / denom;

    if (denom > 0) {
        if (t > tL) return 0;
        if (t > tE) c[0] = t;
    } else {
        if (t < tE) return 0;
        if (t < tL) c[1] = t;
    }
    return 1;
}

/**
 * @param {Number[]} a [x,y]-array
 * @param {Number[]} b [x,y]-array
 * @param {Number[]} box [xmin, ymin, xmax, ymax]-array
 * @param {Number[]} da result [x,y]-array
 * @param {Number[]} db result [x,y]-array
 * @return {Number} Returns OUTSIDE or INSIDE
 */
function clip(a, b, box, da = null, db = null) {
    const [x1, y1] = a;
    const [x2, y2] = b;
    const dx = x2 - x1;
    const dy = y2 - y1;

    if (da === undefined || db === undefined) {
        da = a;
        db = b;
    } else {
        da[0] = a[0];
        da[1] = a[1];
        db[0] = b[0];
        db[1] = b[1];
    }

    if (Math.abs(dx) < EPSILON && Math.abs(dy) < EPSILON && x1 >= box[0] && x1 <= box[2] && y1 >= box[1] && y1 <= box[3]) {
        return INSIDE;
    }

    const c = [0, 1]; // Point
    if (clipT(box[0] - x1, dx, c) && clipT(x1 - box[2], -dx, c) && clipT(box[1] - y1, dy, c) && clipT(y1 - box[3], -dy, c)) {
        const [tE, tL] = c;
        if (tL < 1) {
            db[0] = x1 + tL * dx;
            db[1] = y1 + tL * dy;
        }
        if (tE > 0) {
            da[0] += tE * dx;
            da[1] += tE * dy;
        }
        return INSIDE;
    }
    return OUTSIDE;
}

var da = [null, null];
var db = [null, null];
var res = clip([xa, ya], [xb, yb], [x0, y0, x1, y1], da, db);

var [xc, yc] = da;
var [xd, yd] = db;
console.log(res, xc, yc, xd, yd);

var x0=0；
var y0=0；
var-x1=640；
变量y1=480；
var xa=20；
var-ya=-40；
var xb=680；
var yb=460；
//JS港口https://github.com/w8r/liang-barsky/blob/master/src/liang-barsky.ts
常数ε=1e-6；
内部常数=1；
外部常数=0；
/**
*@param{Number}num
*@param{Number}denom
*@param{Number[]}c结果[x，y]-数组
*/
函数clipT（num、denom、c）{
常数[tE，tL]=c；
if（Math.abs（denom）0）{
如果（t>tL）返回0；
如果（t>tE）c[0]=t；
}否则{
如果（t=box[0]&&x1=box[1]&&y10）{
da[0]+=tE*dx；
da[1]+=tE*dy；
}
返回内部；
}
返回外部；
}
var da=[null，null]；
var db=[null，null]；
var res=片段（[xa，ya]，[xb，yb]，[x0，y0，x1，y1]，da，db）；
var[xc，yc]=da；
var[xd，yd]=db；
日志（res、xc、yc、xd、yd）；

到目前为止，您尝试了什么，如果没有代码，也许您应该去@SebastianSpeitel谢谢Sebastian，我没有代码，因为我不知道如何开始..这应该会有帮助：这正是您需要的。在模具为轴对齐矩形的特殊情况下，它可以执行有效的线裁剪。还有一种更有效的方法-到目前为止您尝试了什么，如果没有代码，也许您应该去@SebastianSpeitel谢谢Sebastian，我没有代码，因为我不知道如何开始..这应该会有帮助：这正是您需要的。在模具为轴对齐矩形的特殊情况下，它执行有效的线裁剪。另一种有效方法-