免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 发帖

[tikz]\begin{tikzpicture}\draw plot(\x,sin(\x r));\end{tikzpicture}[/tikz]

要把图放到标题上,得用尽可能短的 tikz 代码画尽可能复杂的图
分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
$\href{https://kuingggg.github.io/}{\text{About Me}}$

过分了啊~~~~

TOP

不对,着魔了啊~

TOP

改变方法之后外面的标题变不了图了,算啦我也玩够了

TOP

本帖最后由 hbghlyj 于 2021-12-27 08:58 编辑 用Node.js搞了一个后端的小应用程序,它可以把你发送的tex文档用pdflatex转换为dvi,然后用dvisvgm转换为svg,再发给你,并且缓存最近30天的所有图片,例如
  1. window.open("http://tex.cjhb.site?tex="+encodeURIComponent("\\documentclass[10pt,crop,tikz]{standalone}\\usepackage{tikz-cd}\\usepackage{amsmath}\\usepackage{amsfonts}\\usepackage{mathrsfs}\\begin{document}\\begin{tikzpicture}\\draw[gray, thick] (-1,2) -- (2,-4);\\draw[gray, thick] (-1,-1) -- (2,2);\\filldraw(0,0) circle (2pt) node[anchor=west]{Intersection point};\\end{tikzpicture}\\end{document}"))
复制代码

  1. window.open("http://tex.cjhb.site?tex="+encodeURIComponent("\\documentclass[10pt,crop,tikz]{standalone}\\usepackage{tikz-cd}\\usepackage{amsmath}\\usepackage{amsfonts}\\usepackage{mathrsfs}\\begin{document}\\begin{tikzpicture}[>=latex,line width=1pt,x=4cm,y=4cm] \\draw[->] (-1.5,0)--(1.5,0) node[right] {$x$}; \\draw[->] (0,-1.5) node[below=10pt] {$\\displaystyle S=\\frac{12}{5}\\arctan\\left[\\sqrt{265+118 \\sqrt{5}-2 \\sqrt{30\\left(1165+521 \\sqrt{5}\\right)}}\\,\\right]-\\frac{3 \\sqrt{15}}{160}$} --(0,1.5) node[above] {$y$}; \\filldraw[draw=red,fill=red!50,fill opacity=0.5] (1,0) \\foreach \\i in {0,...,4} { -- plot[domain={\\i*144}:{\\i*144+144},smooth] ({3/5*cos(\\x)+2/5*cos(3*\\x/2)},{3/5*sin(\\x)-2/5*sin(3*\\x/2)}) }; \\node[red,below left] at (-0.8,-0.6) {$\\left\\{\\begin{aligned} x&=\\frac35\\cos(t)+\\frac25\\cos\\left(\\frac{3t}{2}\\right)\\\\ y&=\\frac35\\sin(t)-\\frac25\\sin\\left(\\frac{3t}{2}\\right) \\end{aligned}\\right.$}; \\fill[blue] ({(1+sqrt(5))/16},{(1+sqrt(5))/16*tan(pi/5 r)}) circle (2pt) node[above right] {$\\displaystyle \\left(\\frac{1+\\sqrt5}{16}, \\frac{1+\\sqrt5}{16}\\tan\\frac\\pi5\\right)$}; \\end{tikzpicture}\\end{document}"))
复制代码

dvisvgm使用了--no-fonts选项,这样会将字体转换为path,所以浏览器不需要cmex等等专用的字体,坏处就是不能用鼠标选择文字了.
与upmath.me相比,它可以编辑导言区.
此外,参数"engine"的缺省值是pdflatex,它还可以选择xelatex(比如需要使用pstricks时),也可以为lualatex(比如需要tikzlibrary graphdrawing时).
lualatex示例:
  1. window.open("http://tex.cjhb.site?engine=lualatex&tex="+encodeURIComponent('\\documentclass{standalone} \\usepackage{tikz}\\usetikzlibrary{graphdrawing} \\usetikzlibrary{graphs} \\usegdlibrary{trees} \\begin{document} \\begin{tikzpicture}[>=stealth, every node/.style={circle, draw, minimum size=0.75cm}] \\graph [tree layout, grow=down, fresh nodes, level distance=0.5in, sibling distance=0.5in] { 4 -> { 3 -> { 1 -> { 5, " " }, 2,2 }, 3 -> { 1, 2, 2 }, 3 -> { 1, 2, 2 } } }; \\end{tikzpicture} \\end{document}'))
复制代码

xelatex示例:
  1. window.open("http://tex.cjhb.site?engine=xelatex&tex="+encodeURIComponent('\\documentclass[12pt,pstricks,border=15pt]{standalone}\n\\usepackage{pstricks}\n\\begin{document}\n\\def\\myFig{\n \\pscustom[fillstyle=solid,fillcolor=yellow,opacity=.5]{%\n \\psarcn(3,0){3}{180}{90}\\psarcn(1,3){2}{0}{-90}\n \\psarc(1,2){1}{-90}{0}\\psarc(2,0){2}{90}{180}\n }\n \\pscustom[fillstyle=solid,fillcolor=blue,opacity=.5]{%\n \\psarc(0,3){3}{-90}{0}\\psarcn(1,3){2}{0}{-90}\n \\psarcn(2,1){1}{180}{90}\\psarc(2,0){2}{90}{180}\n \\closepath\n }\n}\n\n\\begin{pspicture}(0,0)(6,6)\n\\rput(0,3){\\myFig}\n\\rput{-270}(6,3){\\myFig}\n\\rput{180}(6,3){\\myFig}\n\\rput{-90}(0,3){\\myFig}\n\\end{pspicture}\n\\end{document}'))
复制代码

我的Node.js的代码基本上是从香蕉空间复刻的,见附件:
main.js (1.87 KB) worker.js (4.21 KB) WorkerPool.js (3.88 KB) test.js (372 Bytes)

TOP

回复 5# hbghlyj

只能说,你TQL

TOP

本帖最后由 hbghlyj 于 2021-12-27 09:20 编辑

回复 6# kuing
又修改了一下,如果log参数为1,就可以看tex生成的日志文件,例如:
  1. window.open('http://tex.cjhb.site?log=1&tex=%5Cdocumentclass%7Bstandalone%7D%5Cusepackage%7Btikz%2Camsmath%2Camsfonts%2Cmathrsfs%7D%5Cbegin%7Bdocument%7D%5Cbegin%7Btikzpicture%7D%5Bscale%3D3%5D%5Cdraw%5Bsmooth%2Csamples%3D100%2Cdomain%3D0%3A2*pi%5D%20plot(%7Bdeg(%5Cx)%7D%3A%7Bsin(deg(%5Cx*2))%7D)%3B%5Cdraw(0%2C0)--(45%3A1)%3B%5Cdraw(0%2C0)--(135%3A1)%3B%5Cdraw(0%2C0)--(225%3A1)%3B%5Cdraw(0%2C0)--(-45%3A1)%3B%5Cdraw(55%3A0.5)node%7B%24a%24%7D%3B%5Cdraw(-55%3A0.5)node%7B%24a%24%7D%3B%5Cdraw(125%3A0.5)node%7B%24a%24%7D%3B%5Cdraw(-125%3A0.5)node%7B%24a%24%7D%3B%5Cend%7Btikzpicture%7D%5Cend%7Bdocument%7D#')
复制代码
另外把5#的附件里面涉及的文件路径做了调整,现在可以在本地用Node测试啦

TOP

本帖最后由 hbghlyj 于 2021-12-30 01:08 编辑

打算添加asymptote支持,但是需要多次编译,后来发现有一个perl脚本latexmk可以自动完成这个过程,而且是Overleaf所采用的.
只需在latexmkrc文件中写入
  1. #############
  2. # asymptote #
  3. #############
  4. sub asy {return system("asy $_[0].asy");}
  5. add_cus_dep("asy","eps",0,"asy");
  6. add_cus_dep("asy","pdf",0,"asy");
  7. add_cus_dep("asy","tex",0,"asy");

  8. #############
  9. # metapost  #
  10. #############
  11. add_cus_dep( 'mp', '1', 0, 'mpost' );
  12. sub mpost {return system("mpost $_[0].tex");}
复制代码
即可支持asymptote与metapost:
  1. latexmk test_asymptote.tex
复制代码
  1. latexmk --shell-escape test_metapost.tex
复制代码
另一个方法借助Lualatex的luamplib.
luamplib生成的dvi用dvisvgm转换为svg后变成一团黑了,不知道什么原因
所以先生成pdf再用dvisvgm转换成svg.

TOP

本帖最后由 hbghlyj 于 2022-1-11 02:00 编辑 我在服务器上调试asymptote时如果用svg格式,传输过程中好像会出现什么问题,没有弄清楚,后来就换成了png格式,又出现一个问题,后来发现原来是需要以二进制传输...
现在应该可以使用了,测试一下:
  1. size(5cm);
  2. draw(circle((1,0), 1.5), blue);
  3. draw(ellipse((1,0), 1.5, 0.5));
复制代码
  1. size(6cm);
  2. settings.render = 16;
  3. draw((0,0)--(3,7),red);
  4. dot((0,0));
  5. dot((3,7));
  6. label("Produced with Asymptote "+version.VERSION,point(S),2S);
复制代码
  1. size(10cm);
  2. settings.render = 16;
  3. pair A,B,C,X,Y,Z;
  4. A = (0,0); B = (1,0); C = (0.3,0.8);
  5. draw(A--B--C--A);
  6. X = (B+C)/2; Y = (A+C)/2; Z = (A+B)/2;
  7. draw(A--X, red); draw(B--Y,red); draw(C--Z,red);
复制代码
  1. import math;
  2. add( scale(1cm) * grid(7, 7, gray) );
  3. add( shift(0,3cm) * rotate(-aTan(3/4)) * scale(1cm) * grid(5, 5, gray) );
  4. // 弦图主体
  5. fill( box((3cm,3cm), (4cm,4cm)), opacity(0.5)+yellow );
  6. filldraw( (4cm,0) -- (4cm,3cm) -- (0,3cm) -- cycle
  7. ^^ (7cm,4cm) -- (4cm,4cm) -- (4cm,0) -- cycle
  8. ^^ (3cm,7cm) -- (3cm,4cm) -- (7cm,4cm) -- cycle
  9. ^^ (0,3cm) -- (3cm,3cm) -- (3cm,7cm) -- cycle,
  10. fillpen=opacity(0.1)+red, drawpen=red+0.5mm );
复制代码
  1. draw( (0,0) -- (4cm,2cm), blue, Arrow );
  2. label( "LeftSide", (0,0) -- (4cm,2cm), align=LeftSide );
  3. label( "RightSide", (0,0) -- (4cm,2cm), align=RightSide );
  4. label( "Center", (0,0) -- (4cm,2cm), align=Center );
  5. draw( (6cm,0)--(8cm,2cm), blue, Arrow );
  6. label( "E", (6cm,0)--(8cm,2cm), Relative(E) );
  7. label( "S", (6cm,0)--(8cm,2cm), Relative(S) );
  8. label( "W", (6cm,0)--(8cm,2cm), Relative(W) );
  9. label( "N", (6cm,0)--(8cm,2cm), Relative(N) );
复制代码
  1. draw( (0,0)--(4cm,2cm), blue, Arrow );
  2. label( Label("Rotate", Rotate((4,2))),
  3. (0,0)--(4cm,2cm) );
复制代码
好像不支持中文,无法使用xeCJK

TOP

本帖最后由 hbghlyj 于 2022-1-1 05:07 编辑 测试luamplib
  1. window.open("http://tex.cjhb.site?engine=lualatex&tex="+encodeURIComponent("\\documentclass[border=1mm]{standalone} \\usepackage{luatex85} \\usepackage{luamplib} \\mplibtextextlabel{enable} \\begin{document} \\begin{mplibcode} beginfig(0); numeric u; u = 3mm; pickup pencircle scaled 1pt; angle_radius := 8pt; def mark_rt_angle (expr a, b, c, d) = fill ((.5,0)--(.5,.5)--(0,.5)--origin--cycle) zscaled (angle_radius*unitvector(a-b)) shifted b withcolor d; draw ((.5,0)--(.5,.5)--(0,.5)) zscaled (angle_radius*unitvector(a-b)) shifted b; enddef; vardef arc(expr theta_min, theta_max) = save theta, mystep ; mystep = u; theta = theta_min ; dir theta_min for theta = theta_min+mystep step mystep until theta_max: .. dir theta endfor enddef; z0=(4u,0); z1=z0 rotated 90; z2=z1 rotated 120; z3=z2 rotated 120; z4=0.5[z2,z3]; z5=z3 rotatedaround (z2,180); z6=z3 rotatedaround (z2,90); z7=z3 rotatedaround (z2,-90); path triangle; triangle = z1--z2--z3--cycle; theta_min := 0; theta_max := 60; pair center; center = origin; r := 0.7u; myeps := 0.25u ; path p, a, b; a = (center -- center + dir theta_min) scaled r shifted z2; b = (center -- center + dir theta_max) scaled r shifted z2; p := arc(theta_min, theta_max) scaled (r) shifted z2; fill triangle withcolor 0.8*white; fill b -- a -- p -- cycle withcolor green; draw p; mark_rt_angle (z3, z4, z1, green); draw z1--z4 withcolor blue; draw triangle; draw fullcircle scaled 2abs(z3-z2) shifted z2; draw z6 -- z7; draw z3 -- z5; draw z1 withpen pencircle scaled 4bp withcolor red; draw z4 withpen pencircle scaled 4bp withcolor red; label.bot(btex $A'$ etex,z4); label.llft(btex $O$ etex,z2); label.rt(btex $I$ etex,z3); label.top(btex $A$ etex,z1); label.lft(btex $I'$ etex,z5); label.top(btex $J$ etex, z6); label.bot(btex $J'$ etex, z7); endfig; \\end{mplibcode} \\end{document}"))
复制代码

测试metapost
  1. window.open("http://tex.cjhb.site?engine=mpost&tex="+encodeURIComponent("\nfor a=0 upto 9:draw (0,0){dir 45}..{dir -10a}(6cm,0);\nendfor"))
复制代码

测试gnuplot
  1. window.open("http://tex.cjhb.site?engine=gnuplot&tex="+encodeURIComponent('set monochrome;set xrange [-pi : pi];set key at graph 0.3, 0.7;set title "三角函数";set grid;plot sin(x) lw 3 title "Sine of x", cos(x) lw 3 title "Cosine of x"'))
复制代码

测试pgfplots
  1. window.open("http://tex.cjhb.site?tex="+encodeURIComponent('\\documentclass{standalone}\\usepackage{pgfplots}\\begin{document}\\begin{tikzpicture}\\begin{axis}\\addplot3[surf]{exp(-x^2-y^2)*x};\\end{axis}\\end{tikzpicture}\\end{document}'))
复制代码

TOP

回复 10# hbghlyj


    图都挂了

TOP

回复 11# kuing
抱歉...我刚调试好...现在应该好了吧

TOP

回复 12# hbghlyj

奶思

TOP

回复 13# kuing
做了一个界面
https://tex.cjhb.site/run

TOP

今天用asymptote画图的时候一直报错,后来搜到是因为opacity与ghostscript的"安全模式"不兼容,把-nosafe这个选项加上就可以了,见:https://tex.stackexchange.com/qu ... o-draw-a-lemniscate

TOP

本帖最后由 hbghlyj 于 2022-1-11 01:31 编辑 现在虽然不报错了,但是无法设置透明度(opacity)
  1. fill( box((2cm,3cm), (3cm,4cm)), opacity(0.5)+red);fill( box((3cm,3cm), (4cm,4cm)), red);
复制代码
正常来讲,左边的颜色较浅,但是我这里颜色一样
在官网上运行的结果:
我的PC版Asymptote的运行结果:
我的环境:
Asymptote version 2.70
Windows 10, x86-64

TOP

另外,当我在PC版asymptote设置输出格式为svg时,只出现左边的正方形,且透明度未丢失,显示错误:
  1. 桌面>asy -f svg temp.asy
复制代码
ERROR: error in special: '>' expected at end of closing tag </g

TOP

本帖最后由 hbghlyj 于 2022-1-14 15:04 编辑 现已解决svg的故障,原先asy使用png现改为svg,16楼的透明度丢失的问题就不存在了.

解决办法是加上
  1. --libgs=""
复制代码
这个选项 参见https://github.com/vectorgraphics/asymptote/issues/33
代码已更新,见附件 [attach]10926[/attach]
运行npm build就可以使用了.
调试时,先挂上那个asy.js,用ssh登进去,然后
  1. node dist/main.js
复制代码
用http,在3000端口调试

TOP

本帖最后由 hbghlyj 于 2022-1-12 20:30 编辑

运行一些官网的示例玩玩儿:
  1. size(200);

  2. real w=1.35;

  3. path[] p;
  4. for(int k=0; k < 2; ++k) {
  5.   int i=2+2*k;
  6.   int ii=i^2;
  7.   p[k]=(w/ii,1){1,-ii}::(w/i,1/i)::(w,1/ii){ii,-1};
  8. }

  9. path q0=(0,0)--(w,0.5);
  10. path q1=(0,0)--(w,1.5);
  11. draw(q0); draw(p[0]); draw(q1); draw(p[1]);
  12. path s=buildcycle(q0,p[0],q1,p[1]);
  13. fill(s,mediumgrey);

  14. label("$P$",intersectionpoint(p[0],q0),N);
  15. label("$Q$",intersectionpoint(p[0],q1),E);
  16. label("$R$",intersectionpoint(p[1],q1),W);
  17. label("$S$",intersectionpoint(p[1],q0),S);
  18. label("$f > 0$",0.5*(min(s)+max(s)),UnFill);
复制代码
  1. \documentclass{standalone}
  2. \usepackage{tikz}
  3. \usepackage{tikz-3dplot}
  4. \begin{document}

  5. \tdplotsetmaincoords{70}{0}
  6. \begin{tikzpicture}[tdplot_main_coords]
  7. \def\RI{2}
  8. \def\RII{1.25}

  9. \draw[thick] (\RI,0)
  10.   \foreach \x in {0,300,240,180} { --  (\x:\RI) node at (\x:\RI) (R1-\x) {} };
  11. \draw[dashed,thick] (R1-0.center)
  12.   \foreach \x in {60,120,180} { --  (\x:\RI) node at (\x:\RI) (R1-\x) {} };
  13. \path[fill=gray!30] (\RI,0)
  14.   \foreach \x in {0,60,120,180,240,300} { --  (\x:\RI)};

  15. \begin{scope}[yshift=2cm]
  16. \draw[thick,fill=gray!30,opacity=0.2] (\RII,0)
  17.   \foreach \x in {0,60,120,180,240,300,360}
  18.     { --  (\x:\RII) node at (\x:\RII) (R2-\x) {}};
  19. \end{scope}

  20. \foreach \x in {0,180,240,300} { \draw (R1-\x.center)--(R2-\x.center); };
  21. \foreach \x in {60,120} { \draw[dashed] (R1-\x.center)--(R2-\x.center); };
  22. \end{tikzpicture}

  23. \end{document}
复制代码
来自texample.net
  1. import contour;
  2. import graph;
  3. size(10cm);
  4. real f(real x , real y)
  5. {
  6.   return x**3+y**3-3*x*y;
  7. }
  8. real [] c={-.5 , 0., .5}; // c should be an array
  9. draw(contour(f,(-2,-2),(2,2),c));
  10. xaxis("$x$",LeftTicks);
  11. yaxis("$y$",RightTicks(trailingzero));
复制代码

TOP

本帖最后由 hbghlyj 于 2022-1-13 11:29 编辑 用asymptote画抛物柱面$z=x^2$
下载.png
2022-1-13 10:19
  1. size(6cm);
  2. import graph3;
  3. currentprojection =
  4. orthographic(1,1.5,0.2);
  5. real f(pair xy) {
  6. real x = xy.x; real y = xy.y;
  7. return x^2;
  8. }
  9. surface s = surface(f, (-1.5,-1), (1.5,1));
  10. draw(s,surfacepen=white,meshpen=black,nolight);
  11. xaxis3("$x$",-2,2,red,Arrow3);
  12. yaxis3("$y$",-2,2,green,Arrow3);
  13. zaxis3("$z$",-1,2,blue,Arrow3);
复制代码
用pgfplots画一个类似的图(参考) y x z
  1. \documentclass{standalone}
  2. \usepackage{pgfplots}
  3. \begin{document}
  4. \begin{tikzpicture}
  5. \begin{axis}[view={120}{20},xmin=-2,xmax=2,ymin=-2,ymax=2,zmin=0,zmax=2,axis lines=none]
  6. \addplot3[surf,domain=-1.2:0,y domain=-1:1,mesh,draw=black,samples=5,samples y=8]{x^2};
  7. \addplot3[surf,domain=0:1.2,y domain=-1:1,surf,faceted color=black,fill=white,samples=5,samples y=8]{x^2};
  8. \end{axis}
  9. \end{tikzpicture}
  10. \end{document}
复制代码
箭头(坐标轴)是后期用boxy svg加的.
用pgfplots画一个圆锥面$z=\sqrt{x^2+y^2}$ z x y
用pgfplots画一个双曲抛物面(马鞍面): x y z
  1. \documentclass{standalone}
  2. \usepackage{pgfplots}
  3. \pgfplotsset{ticks=none}
  4. \begin{document}
  5. \begin{tikzpicture}
  6. \begin{axis}[view={35}{25},xmin=-2,xmax=2,ymin=-2,ymax=2,axis lines = center, axis on top, axis line style = {thick, red!80!black}]
  7. \addplot3[surf,domain=-1:1,y domain=-1:1,surf,faceted color=black,fill=white,samples=15,samples y=15]{x^2-y^2};
  8. \end{axis}
  9. \end{tikzpicture}
  10. \end{document}
复制代码

TOP

返回列表 回复 发帖