贝塞尔曲线是我们大陆的叫法,英文名是Bézier Curve,港澳台称为貝茲曲線,新加坡马来西亚称为贝济埃曲线。
先看一下效果图:
点击这里查看动画效果
维基百科中的贝塞尔曲线条目中的几个GIF动画很漂亮,顺路贴上来。
核心Javscript代码:
var w = 250,
h = 300,
t = .5,
delta = .01,
padding = 10,
points = [{x: 10, y: 250}, {x: 0, y: 0}, {x: 100, y: 0}, {x: 200, y: 250}, {x: 225, y: 125}],
bezier = {},
line = d3.svg.line().x(x).y(y),
n = 4,
orders = d3.range(2, n + 2);
var vis = d3.select("body").selectAll("svg")
.data(orders)
.enter().append("svg:svg")
.attr("width", w + 2 * padding)
.attr("height", h + 2 * padding)
.append("svg:g")
.attr("transform", "translate(" + padding + "," + padding + ")");
update();
vis.selectAll("circle.control")
.data(function(d) { return points.slice(0, d) })
.enter().append("svg:circle")
.attr("class", "control")
.attr("r", 7)
.attr("cx", x)
.attr("cy", y)
.call(d3.behavior.drag()
.on("dragstart", function(d) {
this.__origin__ = [d.x, d.y];
})
.on("drag", function(d) {
d.x = Math.min(w, Math.max(0, this.__origin__[0] += d3.event.dx));
d.y = Math.min(h, Math.max(0, this.__origin__[1] += d3.event.dy));
bezier = {};
update();
vis.selectAll("circle.control")
.attr("cx", x)
.attr("cy", y);
})
.on("dragend", function() {
delete this.__origin__;
}));
vis.append("svg:text")
.attr("class", "t")
.attr("x", w / 2)
.attr("y", h)
.attr("text-anchor", "middle");
vis.selectAll("text.controltext")
.data(function(d) { return points.slice(0, d); })
.enter().append("svg:text")
.attr("class", "controltext")
.attr("dx", "10px")
.attr("dy", ".4em")
.text(function(d, i) { return "P" + i });
var last = 0;
d3.timer(function(elapsed) {
t = (t + (elapsed - last) / 5000) % 1;
last = elapsed;
update();
});
function update() {
var interpolation = vis.selectAll("g")
.data(function(d) { return getLevels(d, t); });
interpolation.enter().append("svg:g")
.style("fill", colour)
.style("stroke", colour);
var circle = interpolation.selectAll("circle")
.data(Object);
circle.enter().append("svg:circle")
.attr("r", 4);
circle
.attr("cx", x)
.attr("cy", y);
var path = interpolation.selectAll("path")
.data(function(d) { return [d]; });
path.enter().append("svg:path")
.attr("class", "line")
.attr("d", line);
path.attr("d", line);
var curve = vis.selectAll("path.curve")
.data(getCurve);
curve.enter().append("svg:path")
.attr("class", "curve");
curve.attr("d", line);
vis.selectAll("text.controltext")
.attr("x", x)
.attr("y", y);
vis.selectAll("text.t")
.text("t=" + t.toFixed(2));
}
function interpolate(d, p) {
if (arguments.length < 2) p = t;
var r = [];
for (var i=1; i<d.length; i++) {
var d0 = d[i-1], d1 = d[i];
r.push({x: d0.x + (d1.x - d0.x) * p, y: d0.y + (d1.y - d0.y) * p});
}
return r;
}
function getLevels(d, t_) {
if (arguments.length < 2) t_ = t;
var x = [points.slice(0, d)];
for (var i=1; i<d; i++) {
x.push(interpolate(x[x.length-1], t_));
}
return x;
}
function getCurve(d) {
var curve = bezier[d];
if (!curve) {
curve = bezier[d] = [];
for (var t_=0; t_<=1; t_+=delta) {
var x = getLevels(d, t_);
curve.push(x[x.length-1][0]);
}
}
return [curve.slice(0, t / delta + 1)];
}
function x(d) { return d.x; }
function y(d) { return d.y; }
function colour(d, i) {
return d.length > 1 ? ["#ccc", "yellow", "blue", "green"][i] : "red";
}
贝塞尔曲线是我们大陆的叫法,英文名是Bézier Curve,港澳台称为貝茲曲線,新加坡马来西亚称为贝济埃曲线。
先看一下效果图:
点击这里查看动画效果
维基百科中的贝塞尔曲线条目中的几个GIF动画很漂亮,顺路贴上来。
核心Javscript代码:
var w = 250,
h = 300,
t = .5,
delta = .01,
padding = 10,
points = [{x: 10, y: 250}, {x: 0, y: 0}, {x: 100, y: 0}, {x: 200, y: 250}, {x: 225, y: 125}],
bezier = {},
line = d3.svg.line().x(x).y(y),
n = 4,
orders = d3.range(2, n + 2);
var vis = d3.select("body").selectAll("svg")
.data(orders)
.enter().append("svg:svg")
.attr("width", w + 2 * padding)
.attr("height", h + 2 * padding)
.append("svg:g")
.attr("transform", "translate(" + padding + "," + padding + ")");
update();
vis.selectAll("circle.control")
.data(function(d) { return points.slice(0, d) })
.enter().append("svg:circle")
.attr("class", "control")
.attr("r", 7)
.attr("cx", x)
.attr("cy", y)
.call(d3.behavior.drag()
.on("dragstart", function(d) {
this.__origin__ = [d.x, d.y];
})
.on("drag", function(d) {
d.x = Math.min(w, Math.max(0, this.__origin__[0] += d3.event.dx));
d.y = Math.min(h, Math.max(0, this.__origin__[1] += d3.event.dy));
bezier = {};
update();
vis.selectAll("circle.control")
.attr("cx", x)
.attr("cy", y);
})
.on("dragend", function() {
delete this.__origin__;
}));
vis.append("svg:text")
.attr("class", "t")
.attr("x", w / 2)
.attr("y", h)
.attr("text-anchor", "middle");
vis.selectAll("text.controltext")
.data(function(d) { return points.slice(0, d); })
.enter().append("svg:text")
.attr("class", "controltext")
.attr("dx", "10px")
.attr("dy", ".4em")
.text(function(d, i) { return "P" + i });
var last = 0;
d3.timer(function(elapsed) {
t = (t + (elapsed - last) / 5000) % 1;
last = elapsed;
update();
});
function update() {
var interpolation = vis.selectAll("g")
.data(function(d) { return getLevels(d, t); });
interpolation.enter().append("svg:g")
.style("fill", colour)
.style("stroke", colour);
var circle = interpolation.selectAll("circle")
.data(Object);
circle.enter().append("svg:circle")
.attr("r", 4);
circle
.attr("cx", x)
.attr("cy", y);
var path = interpolation.selectAll("path")
.data(function(d) { return [d]; });
path.enter().append("svg:path")
.attr("class", "line")
.attr("d", line);
path.attr("d", line);
var curve = vis.selectAll("path.curve")
.data(getCurve);
curve.enter().append("svg:path")
.attr("class", "curve");
curve.attr("d", line);
vis.selectAll("text.controltext")
.attr("x", x)
.attr("y", y);
vis.selectAll("text.t")
.text("t=" + t.toFixed(2));
}
function interpolate(d, p) {
if (arguments.length < 2) p = t;
var r = [];
for (var i=1; i<d.length; i++) {
var d0 = d[i-1], d1 = d[i];
r.push({x: d0.x + (d1.x - d0.x) * p, y: d0.y + (d1.y - d0.y) * p});
}
return r;
}
function getLevels(d, t_) {
if (arguments.length < 2) t_ = t;
var x = [points.slice(0, d)];
for (var i=1; i<d; i++) {
x.push(interpolate(x[x.length-1], t_));
}
return x;
}
function getCurve(d) {
var curve = bezier[d];
if (!curve) {
curve = bezier[d] = [];
for (var t_=0; t_<=1; t_+=delta) {
var x = getLevels(d, t_);
curve.push(x[x.length-1][0]);
}
}
return [curve.slice(0, t / delta + 1)];
}
function x(d) { return d.x; }
function y(d) { return d.y; }
function colour(d, i) {
return d.length > 1 ? ["#ccc", "yellow", "blue", "green"][i] : "red";
}
分享到:
相关推荐
----------------- 转载注明出处, 环境是svg6.0插件 用最简单的做法实现看是很难的东西. 运行HTML即可 -----------------
安卓 签名 笔迹 平滑 贝塞尔曲线 一种用于 模拟真实 手写笔迹签名 的算法, 要求能够保持原笔迹平滑,并有笔锋的效果. 在网上看了一些资料, 资料很多, 能够达到用于正式产品中的效果的一个都没有找到. 我看到最靠谱...
基于该项目的示例: : 依存关系svg-path-properties react-native-svg安装$ npm i react-native-svg-animations --save演示版动画SVGPath 动画SVG路径用法该软件包包含用于在本机显示SVG动画的包装器组件,当前包含...
讨论: : 产品特点轻松渲染QR码图像(可选)嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...
如何使用vite-svg-loader
开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具...
SVG系列-------SVG动画编程及其应用
赠送jar包:wmf2svg-0.9.8.jar; 赠送原API文档:wmf2svg-0.9.8-javadoc.jar; 赠送源代码:wmf2svg-0.9.8-sources.jar; 赠送Maven依赖信息文件:wmf2svg-0.9.8.pom; 包含翻译后的API文档:wmf2svg-0.9.8-javadoc-...
在Vue中的天气应用程序通知,一个小SVG动画演示
椭圆弧转为多段贝塞尔曲线的C#算法代码.在处理SVG的时候特别有用.
支持 PhotoShop 将形状图片转化为 svg路径的脚本
javascript操作svg,支持滚轮放大缩小,鼠标拖动,有多个demo演示
赠送jar包:jaxb-svg11-1.0.2.jar; 赠送原API文档:jaxb-svg11-1.0.2-javadoc.jar; 赠送源代码:jaxb-svg11-1.0.2-sources.jar; 赠送Maven依赖信息文件:jaxb-svg11-1.0.2.pom; 包含翻译后的API文档:jaxb-svg11...
安卓SVG矢量动画DEMO;SVG和VectorDrawable;来源于GitHub,因为GitHub下载多有限制,如网络网速等,所以这里放一份。
赠送jar包:wmf2svg-0.9.8.jar; 赠送原API文档:wmf2svg-0.9.8-javadoc.jar; 赠送源代码:wmf2svg-0.9.8-sources.jar; 赠送Maven依赖信息文件:wmf2svg-0.9.8.pom; 包含翻译后的API文档:wmf2svg-0.9.8-javadoc-...
react-native-svg-uri, 在来自URL或者 static 文件的本地响应中,呈现SVG图像 react-native-svg-uri从URL或者 static 文件中呈现来自React的SVG图像这是用 rn 0.33和 react-native-svg 4.3.1 ( 依赖于此库) react-...
PSD文件导出为SVG格式,save-ps-to-svg1.0.jsx 在PS的script目录中加入后,直接导出形状即可
赠送jar包:jaxb-svg11-1.0.2.jar; 赠送原API文档:jaxb-svg11-1.0.2-javadoc.jar; 赠送源代码:jaxb-svg11-1.0.2-sources.jar; 赠送Maven依赖信息文件:jaxb-svg11-1.0.2.pom; 包含翻译后的API文档:jaxb-svg11...
iOS_多媒体_绘制不同的SVG图形_4Macaw
Svg win系统预览插件,安装以后可以和预览PNG一样直接看到图片样式,一目了然,而不需要一 一通过浏览器来打开才能看到,安装后无需任何操作,就能生效