gpt4 book ai didi

svg - SVG 中的海龟图形?

转载 作者:行者123 更新时间:2023-12-04 21:10:03 27 4
gpt4 key购买 nike

logo的turtlegraphics的svg路径中是否有等价物?
而不是硬编码的 x 和 y 坐标,这也迫使我在移动更相对的“增量”方法时调整控制点。
我的解决方案应该适用于 FOCS(Firefox Opera Chrome Safaries ex IE)浏览器。
问候
杰伦。

最佳答案

编辑:我根据这个概念制作了一个实时编辑 web 应用程序:http://forresto.github.com/turtle-svg/

如果您想在 JavaScript 中使用海龟图形(带旋转)制作 SVG 路径,则不需要太多数学运算:

// Turtle graphics drawing to SVG path
var TAU = 2 * Math.PI;

var pen = true;
var d = "";
var vector = {
x: 0,
y: 1
};
var currentAngle = 0;

// Relative turns, angles are 0.0 to 1.0
var turnRight = function(angle){
currentAngle += angle;
currentAngle = currentAngle%1;
vector.x = Math.sin(TAU*currentAngle);
vector.y = Math.cos(TAU*currentAngle);
};
var turnLeft = function(angle){
turnRight(-angle);
};

// Absolute turn
var turnTo = function(angle){
currentAngle = angle;
vector.x = Math.sin(TAU*currentAngle);
vector.y = Math.cos(TAU*currentAngle);
};

// Drawing
var penUp = function(){
pen = false;
};
var penDown = function(){
pen = true;
};

// Relative moves
var moveForward = function (distance) {
d += pen ? "l " : "m ";
d += (distance * vector.x) + " " + (distance * vector.y) + " ";
}

// Absolute moves
var moveTo = function (x, y) {
d += pen ? "L " : "M ";
d += x + " " + y + " ";
}

然后设置你的路径 d到生成的 d .通过一些递归绘图查看它的实际效果: http://jsfiddle.net/forresto/hVE2U/

关于svg - SVG 中的海龟图形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2570821/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com