我正在嘗試沿著 X 中的點積在 Javascript 中的起點和終點之間縮放一條線，輕松地從 0 到 1。我正在尋找類似于這張圖片中的紅線的東西：
我有線性刻度，但我不確定如何減輕刻度。我嘗試將緩動應用于線性點，然后從線性量中減去該量，但這是不對的：緩動點超過了起點。運行下面的代碼段應該可以證明這個問題。任何人都可以幫我解決這個問題嗎？我將不勝感激。
function magnitude(p) {
return Math.sqrt(p.x ** 2 p.y ** 2);
}
function normalize(p) {
let m = magnitude(p);
if (m > 0) {
return { x: p.x / m, y: p.y / m };
}
}
function dot(pt1, pt2) {
return pt1.x * pt2.x pt1.y * pt2.y;
}
//ease functions
function easeInQuad(n) {
return n ** 2;
}
function easeOutQuad(n) {
return -n * (n - 2);
}
function render_line_graph() {
let points = [
{ x: 2, y: 2 },
{ x: 3, y: 1 },
{ x: 4, y: 4 },
{ x: 5, y: 3 },
{ x: 6, y: 6 },
{ x: 7, y: 5 },
{ x: 8, y: 6 }
];
let scale_amount = 1-slider.value/100;
//first & last points x,y respectively
let x1 = points[0].x;
let y1 = points[0].y;
let x2 = points.slice(-1)[0].x;
let y2 = points.slice(-1)[0].y;
//distance between the first & last points' coordinates
let x_dist = x2 - x1;
let y_dist = y2 - y1;
let vec = { x: x2 - x1, y: y2 - y1 };
let line = normalize(vec);
let normal_data = [];
let linear_data = [];
let ease_data = [];
let chart = null;
for (let i = 0; i < points.length; i ) {
let p = points[i];
let dot_product = dot({ x: p.x - x1, y: p.y - y1 }, line);
if (normal_check.checked)
{
normal_data.push({ x: p.x, y: p.y });
}
if (linear_check.checked)
{
let linear_x = p.x - dot_product * scale_amount * line.x;
let linear_y = p.y - dot_product * scale_amount * line.y;
linear_data.push({ x: linear_x, y: linear_y });
}
if (ease_check.checked)
{
let alpha = dot({ x: p.x - x1, y: p.y - y1 }, line) / magnitude(vec);
let alpha_eased = 1 - easeInQuad(1 - alpha);
let ease_x = p.x - alpha_eased * scale_amount * vec.x;
let ease_y = p.y - alpha_eased * scale_amount * vec.y;
ease_data.push({ x: ease_x, y: ease_y });
}
}
chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: false,
theme: "light2",
title: {
text: "Scaling a Line with Ease"
},
data: [
{
type: "line",
color: "blue",
lineDashType: "dash",
indexLabelFontSize: 16,
dataPoints: [points[0],points.slice(-1)[0]]
},
{
type: "line",
color: "blue",
indexLabelFontSize: 16,
dataPoints: normal_data
},
{
type: "line",
color: "green",
indexLabelFontSize: 16,
dataPoints: linear_data
},
{
type: "line",
color: "red",
indexLabelFontSize: 16,
dataPoints: ease_data
},
]
});
chart.render();
}
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var normal_check = document.getElementById("normal");
var linear_check = document.getElementById("linear");
var ease_check = document.getElementById("ease");
output.innerHTML = slider.value "%"; // Display the default slider value
render_line_graph();
slider.oninput = function () {
scale_amount = this.value / 100;
output.innerHTML = this.value "%";
render_line_graph();
};
normal_check.oninput = function () {
render_line_graph();
};
linear_check.oninput = function () {
render_line_graph();
};
ease_check.oninput = function () {
render_line_graph();
};html
{
font-family: sans-serif;
}
#controls
{
display: flex;
flex-direction: column;
border: 1px solid #ddd;
padding: 20px;
width: fit-content;
position: absolute;
top: 0;
right: 0;
}<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 180px; width: 320px;"></div>
<div id="controls">
<div><input type="checkbox" id="normal" name="normal" value="True" checked>
<label for="normal"> Normal Line</label>
</div>
<div><input type="checkbox" id="linear" name="linear" value="True" checked>
<label for="linear"> Linear Scale</label>
</div>
<div><input type="checkbox" id="ease" name="ease" value="True" checked>
<label for="ease"> Scale with Ease</label>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider" id="myRange">
<p>Scale: <span id="demo"></span></p>
</div>
</div>uj5u.com熱心網友回復：
讓我們考慮一下這段代碼應該實作什么：我們并不是真正“縮放”，而是“重新定位點，平行于趨勢線”。雖然我們可以將其視為縮放x坐標，但我們絕對不是縮放y：相反，我們希望保留趨勢線上方（或下方）點的高度，所以讓我們把它寫下來。
首先，我們捕獲趨勢線資料：
const first = points[0];
const last = points.slice(-1)[0];
const d = {
x: last.x - first.x,
y: last.y - first.y
};
有了這些資訊，我們現在可以將每個點表示為不是某個值x，而是某個值start.x r * d.x，其中r第一個坐標為 0，最后一個坐標為 1：
function getXratio(p) {
let cx = p.x - first.x;
return cx / d.x;
}
現在我們可以用這些比率來表示坐標：每個點都有一個x坐標，我們可以表示為first.x ratio * d.x，以及一個y坐標，我們可以表示為“趨勢線高度，加上趨勢線上方或下方的x一些高度偏移” h: first.y ratio * d.y h.
現在的訣竅：如果我們想像你展示的那樣進行縮放，我們可以引入我們的縮放因子，我們稱之為factor：
function rewritePoint(p, factor) {
let ratio = getXratio(p);
// scale x "as normal"
let x = first.x factor * d.x;
// don't scale y, but _reposition_ it along the trend line instead.
let h = p.y - (first.y ratio * d.y);
let y = first.y factor * ratio * d.y h;
return { x, y };
}
也就是說，我們保留趨勢線上方/下方的高度h，并根據縮放x坐標將其添加到趨勢線的高度。
如果我們這樣做，我們最終會得到簡單的線性縮放。因此，讓我們添加一個映射函式，讓值變得rewritePoint混亂ratio：
function rewritePoint(p, factor, mapRatio) {
let ratio = getXratio(p);
// scale x "as normal", corrected for mapping
let x = first.x factor * mapRatio(ratio) * d.x;
// reposition y along the trend line, using height
// above/below the trend at the original x position,
// adjusted for the mapped x position.
let t = first.y ratio * d.y;
let h = p.y - t;
let y = first.y h factor * mapRatio(ratio) * d.y;
return { x, y };
}
function linear(p, factor) {
return rewritePoint(p, factor, v => v);
}
const easingFactor = 3;
function easeIn(p, factor) {
return rewritePoint(p, factor, v => v ** (1/easingFactor));
}
function easeOut(p, factor) {
return rewritePoint(p, factor, v => v ** easingFactor);
}
There are of course "nicer" formulae that you can use for easing, but these are about as basic as you can get while getting the point across. So, putting that all together, with plain data in blue, linear compressed in red, eased in using green, and eased out using purple:
const points = [
{ x: 2, y: 2 },
{ x: 3, y: 1 },
{ x: 4, y: 4 },
{ x: 5, y: 3 },
{ x: 6, y: 6 },
{ x: 7, y: 5 },
{ x: 8, y: 6 }
];
const first = points[0];
const last = points.slice(-1)[0];
const d = {
x: last.x - first.x,
y: last.y - first.y
};
function getXratio(p) {
let cx = p.x - first.x;
return cx / d.x;
}
function rewritePoint(p, factor, mapRatio) {
let ratio = getXratio(p);
// scale x "as normal"
let x = first.x factor * mapRatio(ratio) * d.x;
// don't scale y, but _reposition_ it along the trend line instead.
let t = first.y ratio * d.y;
let h = p.y - t;
let y = first.y h factor * mapRatio(ratio) * d.y;
return { x, y };
}
function linear(p, factor) {
return rewritePoint(p, factor, v => v);
}
const easingFactor = 2.2;
function easeIn(p, factor) {
return rewritePoint(p, factor, v => v ** (1/easingFactor));
}
function easeOut(p, factor) {
return rewritePoint(p, factor, v => v ** easingFactor);
}
function drawChart() {
let factor = slider.value/100;
let scaled = points.map(p => linear(p, factor));
let easedIn = points.map(p => easeIn(p, factor));
let easedOut = points.map(p => easeOut(p, factor));
chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: false,
theme: "light2",
data: [
{
type: "line",
color: "blue",
lineDashType: "dash",
indexLabelFontSize: 16,
dataPoints: [points[0],points.slice(-1)[0]]
},
{
type: "line",
color: "blue",
indexLabelFontSize: 16,
dataPoints: points
},
{
type: "line",
color: "red",
indexLabelFontSize: 16,
dataPoints: scaled
},
{
type: "line",
color: "green",
indexLabelFontSize: 16,
dataPoints: easedIn
},
{
type: "line",
color: "purple",
indexLabelFontSize: 16,
dataPoints: easedOut
}
]
});
chart.render();
}
slider.addEventListener(`input`, drawChart);
drawChart();#chartContainer { height: 180px; width: 320px; }<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer"></div>
<input type="range" min="0" max="100" value="100" id="slider">轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435885.html
標籤：javascript 数学 图形 几何学 线性代数
上一篇：重復組合公式