网友发的一个能生成tkz-euclide代码的类似GeoGebra的网页

hbghlyj

abababa 发表于 2024-9-17 09:28
这些编辑器都需要写代码才行，我最需要的是geogebra那种直接画的，然后在最后生成好看的代码 ...

13# 也不是题外话，Cinderella 跟 GeoGebra 类似，可以直接在上面画图，而且会生成 JS 代码。对圆锥曲线的支持比GeoGebra好

hbghlyj

abababa 发表于 2024-9-17 09:28
生成tikz代码 ... 这个很明显不如tkz-euclide那个直观。

我同意以上观点！所以我想出了一个方法将 tkz-euclide 包含在论坛中
用1# “所见即所得”工具画图，生成tkz-euclide，而 kroki.io 可以为 tkz-euclide 代码生成链接。因此，如果结合两者，可以直接将 tkz-euclide 放在论坛里

abababa

比较功能的话，除了二次曲线那些，只对初中的平面几何图，主楼里的和geogebra里的都一样，可就是觉得主楼里的不如geogebra画图时方便，差在哪呢？

kuing

abababa 发表于 2024-9-18 15:44
比较功能的话，除了二次曲线那些，只对初中的平面几何图，主楼里的和geogebra里的都一样，可就是觉得主楼里的不如geogebra画图时方便，差在哪呢？

可能是操作时的视觉效果？
就比如线段操作，GGB 在鼠标移到点上时会变成手指，点击始点后点会高亮，鼠标移开时会有一条线紧跟着鼠标，直到鼠标移到终点附近（还没点击时）就自动连起来，给你看到最终效果，只等你点下去就完成了，这样效果就很自然。
而主楼里完全没有这些，点了一个点，你都看不出到底有没有点中它。
实时反馈的视觉效果会使你很清楚当前的状态，操作时就会感觉很轻松。

abababa

kuing 发表于 2024-9-18 16:10
可能是操作时的视觉效果？
就比如线段操作，GGB 在鼠标移到点上时会变成手指，点击始点后点会高亮，鼠标 ...

原来如此，我再反馈一下。我之前画了图，然后想删除一个点，可是离得太近点到另外的点了，删除之后整个图都差不多没了，这也和不能清楚地看出选哪个点有关。

hbghlyj

abababa 发表于 2024-9-14 10:33
但是geogebra生成的代码我觉得太乱了

以下是详细步骤。
这些步骤并不总是需要手动完成，可以编写 TamperMonkey 脚本来单击一个按钮即可完成🤔，我记得论坛上有一些其他 TamperMonkey 脚本的示例。

首先，在页面源代码中搜索“applet”，找到GeoGebra applet的ID 在此示例中，所需的 ID 是 37303159。
在 JS 控制台中输入 ggbApplet，然后输入 GeoGebra applet的ID，然后输入.exportPGF()
函数.exportPGF()的参数是回调函数，你可以将自己的 TikZ 代码转换器作为参数传递给它。举一个简单的例子，输入function(a){console.log(a)}

上面的例子完全使用了 GeoGebra 默认导出，那么，如何更改输出？这可以通过作为参数传递给它回调函数来完成。让我们看看如何将自定义的 TikZ 代码转换器作为参数传递给它回调
例如在GeoGebra帮助论坛帖子中
此代码可以删除不必要的样式并注入自定义样式。

1. const patNum = /[\d]+(\.([\d]+))?/g
2. const rplNum = a => Math.round((parseFloat(a)+Number.EPSILON)*100)/100
3. const patColor=/\\definecolor{(?<color>[a-z]+)}/g
4. const patLw=/line width=(\d+\.?\d*)pt/g
5. const rplLw = a => `lw${a.replace('.','p')}`
6. const axes = ['x', 'y']
7. const bddtypes = ['min', 'max']
8. const PGF_VERSION = 1.18
9. let myApp
10. let appNum = 0
11. new Function(`myApp = ${$('[id^="ggbApplet"]')[appNum].id}`)()
12. myApp.exportPGF(function(a){
13.   const SCALE_FACTOR = rplNum(50/Math.max(...a.match(patNum).map(a=>parseFloat(a))))
14.   // build the array of colors
15.   let myColors = []
16.   while((match = patColor.exec(a)) !== null) {
17.     let color = match.groups.color
18.     for (var i = 1; i <= color.length; i++) {
19.       let colorShort = color.substring(0,i)
20.       if (myColors.find(c=>c.colorShort==colorShort) == null) {
21.         myColors.push({color:color,colorShort:colorShort})
22.         break
23.       }
24.     }
25.   }
26.   // round to 2dp, remove unnecessary styles, inject custom style holder
27.   let output = a.replace(patNum,rplNum)
28.     .replace(/\[10pt\]{article}/,'{standalone}')
29.     .replace(/(compat=)\d+\.\d+/,`$1${PGF_VERSION}`)
30.     .replace(/^\\usepackage{mathrsfs}\s*\\usetikzlibrary{arrows}\s*\\pagestyle{empty}\s*\n/m,'')
31.     .replace(/(\\begin{tikzpicture}\[)(.*)(\])/,`$1scale=${SCALE_FACTOR}$3`)
32.     .replace(/(?=\\begin{tikzpicture})/,'\\tikzset{\n}\n')
33.   // replace color=, fill= with short names
34.   const myIdx = output.indexOf('\\tikzset{') + '\\tikzset{\n'.length
35.   let myStyles = ''
36.   for (color of myColors) {
37.     for (word of ['color', 'fill']) {
38.         myStyles += `${word[0]}${color.colorShort}/.style={${word}=${color.color}},\n`
39.         let pat = new RegExp(`${word}=${color.color}`, 'g')
40.         output = output.replace(pat,`${word[0]}${color.colorShort}`)
41.     }
42.   }
43.   // build the set of line widths
44.   const myLw = new Set()
45.   while((match = patLw.exec(output)) !== null) {
46.     line_width = match[1]
47.     if(!myLw.has(line_width)) {myLw.add(line_width)}
48.   }
49.   // replace line width= with short names
50.   for (lw of myLw) {
51.     myStyles += `lw${lw.replace('.','p')}/.style={line width=${lw}pt},\n`
52.     let pat = new RegExp(`line width=${lw}pt`,'g')
53.     output = output.replace(pat,`lw${lw.replace('.','p')}`)
54.   }
55.   // inject my styles into custom styles holder
56.   output = [output.slice(0,myIdx),myStyles,output.slice(myIdx)].join('')
57.   // remove extra spaces
58.   output = output.replace(/\\draw \[/g,'\\draw[')
59.     .replace(/\)\s*--\s*\(/g,')--(')
60.   // restrict x,y domains to [xy](min|max)
61.   if (output.indexOf("\\begin{axis}") > -1){
62.     const graphBdd = {}  // {x: {min: x0, max: x1}, y: {min: y0, may: y1}}
63.     let restrictStr = ''
64.     let pat, bdd
65.     for (axis of axes) {
66.       graphBdd[axis] = {}
67.       for (bddtype of bddtypes) {
68.         pat = new RegExp(`${axis}${bddtype}=(-?[\\d]+(\.([\\d]+))?)`)
69.         bdd = parseFloat(output.match(pat)[1])
70.         graphBdd[axis][bddtype] = bdd
71.       }
72.       restrictStr += `,\nrestrict ${axis} to domain=${graphBdd[axis]["min"]}:${graphBdd[axis]["max"]}`
73.     }
74.     let g0 = output.match(pat)[0]
75.     console.log(`restrictStr = ${restrictStr}`)
76.     output = output.replace(pat,`${g0}${restrictStr}`)
77.   }
78.   // print the output
79.   console.log(output)
80. })

复制代码

这将清理 GeoGebra 生成的代码。您只需将此代码粘贴到 JS 控制台中，它就会为您完成前面的步骤（它会自动在页面上找到 ggbApplet 的 ID）。


由于 GeoGebra 是开源的，所以有很多值得探索的地方！

hbghlyj

kuing 发表于 2024-9-18 08:10
可能是操作时的视觉效果？
就比如线段操作，GGB 在鼠标移到点上时会变成手指，点击始点后点会高亮，鼠标 ...

我同意上述观点！例如在 TikZEdt 中，当选择 TikZ node 时，它​​会从红色变为绿色；当选择 TikZ scope 时，它​​的边框会高亮。它支持极坐标、几何变换。code.google.com/archive/p/tikzedt/downloads


遗憾的是 TikZEdt 已停止开发，并且不支持 tkz-euclide。TikZEdt 只能在 Windows 上运行，不能在其他操作系统上运行。
由于它基于 PDF，TikZEdt 需要安装 LaTeX。如果您的电脑上没有安装 LaTeX，则无法渲染任何内容。

hbghlyj

hbghlyj 发表于 2024-9-18 17:20
遗憾的是 TikZEdt 已停止开发，并且不支持 tkz-euclide。

希望有懂 C# 的人可以继续开发这个软件，以支持 tkz-euclide
我对 C# 一窍不通。