帶有鼠標事件的貝塞爾曲線
[英]Bezier curve with mouse event
問題描述
我想用鼠標事件繪制一條貝塞爾曲線。
function draw(selection)
{
var keep = false, path, xy0;
line = d3.svg.line()
.interpolate(function(points) {return points.join("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); })
.x(function(d) {return d[0];})
.y(function(d) {return d[1];});
selection
.on('mousedown', function() {
keep = true;
xy0 = d3.mouse(this);
path = d3.select('svg')
.append('path')
.attr('d', line([xy0, xy0]))
.style({'stroke': 'black', 'stroke-width': '3px'});
})
.on('mouseup', function() {
keep = false;
})
.on('mousemove', function(){
if(keep) {
Line = line([xy0, d3.mouse(this).map(function(x) {return x - 1;})]);
console.log(Line);
path.attr('points', Line);
}
});
}
但它不起作用。 你知道怎么做嗎？
提前致謝，
1 個解決方案
解決方案1
4 已采納 2016-12-31 22:06:39
仍然不確定我是否理解這個問題。
M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 為貝塞爾曲線參數
不，那是路徑的“d”屬性，它繪制了一條特定的貝塞爾曲線。 我不確定你會如何將它與你的鼠標移動結合起來。 我試過，我猜它會產生一種曲線：
<!DOCTYPE html> <html> <head> <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> </head> <body> <script> var keep = false, mouseStart = null, controlPoints = "C 40 10, 65 10, 95 80 S 150 150,"; var svg = d3.select('body') .append('svg') .attr('width', 500) .attr('height', 500) .style('border', '1px solid black'); var path = svg.append("path") .style("stroke", "steelblue") .style("stroke-width", "2px") .style("fill", "none"); svg.on('mousedown', function() { keep = true; mouseStart = d3.mouse(this); }) .on('mouseup', function() { keep = false; }) .on('mousemove', function() { var mouseEnd = d3.mouse(this); if (keep) { path.attr("d", "M" + mouseStart + controlPoints + mouseEnd); } }); </script> </body> </html>
如果你想要從頭到尾的平滑曲線，你可以嘗試這樣的事情：
<!DOCTYPE html> <html> <head> <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> </head> <body> <script> var keep = false, mouseStart = null; var svg = d3.select('body') .append('svg') .attr('width', 500) .attr('height', 500) .style('border', '1px solid black'); var path = svg.append("path") .style("stroke", "steelblue") .style("stroke-width", "2px") .style("fill", "none"); svg.on('mousedown', function() { keep = true; mouseStart = d3.mouse(this); }) .on('mouseup', function() { keep = false; }) .on('mousemove', function() { var mouseEnd = d3.mouse(this); if (keep) { var dx = mouseStart[0] - mouseEnd[0], dy = mouseStart[1] - mouseEnd[1], dr = Math.sqrt(dx * dx + dy * dy); path.attr("d", "M" + mouseStart[0] + "," + mouseStart[1] + "A" + dr + "," + dr + " 0 0,1 " + mouseEnd[0] + "," + mouseEnd[1]); } }); </script> </body> </html>
鼠標在Bezier曲線上
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.