SVG绘制电路元器件图形与GO.Js绘制元器件电路图形比较

你需要能看的懂SVG中path标签绘制的路径，本篇才对你有意义

实际效果如下图：
电路元器件图形

演示效果

go中用到的绘制规则和svg差不多，只是新增了一些新的方法。

本例中除了二次贝塞尔曲线绘制的正弦波需要研究之外，都是些简单的svg图形应用。

svg 曲线

元素用于定义一个路径。
下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

svg绘制代码

    <svg>
        <!-- 电阻 -->
        <path transform="translate(20,100)" d="M0 50 L30 50 L30 40 L70 40 L70 50L100 50 M30 50 L30 60 L70 60 L70 50"
            fill="transparent" stroke="red" />

        <!-- 电容 -->
        <path transform="translate(140,100)" d="M0 50 L40 50 M40 30 L40 70 M60 30 L60 70 M60 50L100 50" fill="transparent"
            stroke="red" />

        <!-- 电感 -->
        <path transform="translate(260,100)" d="M0 50 L30 50 M30 50 Q40 30,40 50T50 50 T60 50,T70 50M70 50 L100 50" fill="transparent"
            stroke="red" />

        <!-- 二极管 -->
        <path transform="translate(380,100)" d="M0 50 L30 50M30 30 L30 70 M40 45 L40 55 M50 40 L50 60 M60 35 L60 65 M70 30 L70 70 M70 50 L100 50"
            fill="transparent" stroke="red" />

        <!-- 集成运放 -->
        <path transform="translate(520,100)" d="M0 40 L20 40 M0 60 L20 60 M20 25L80 50L20 75Z M22 40L32 40 M27 35L27 45 M22 60L32 60 M80 50 L100 50"
            fill="transparent" stroke="red"></path>
        <!-- 电源 -->
        <path transform="translate(640,100)" d="M0 50 L45 50 M45 40 L45 60 M55 30 L55 70 M55 50 L100 50" fill="transparent"
            stroke="red" />
        <!-- 信号源 -->
        <path transform="translate(760,100)" d="M0 50 L20 50 L20 25 L80 25 L80 50L100 50 M20 50 L20 75 L80 75 L80 50 M25 48L25 35L35 35L35 48L45 48L45 35L55 35L55 48L65 48L65 35L75 35L75 48M25 68Q30 44,35 60T45 60T55 60T65 60T75 68"
            fill="transparent" stroke="red" />
    </svg>

go.js 中的绘制效果

go.js中的图形绘制和svg中的绘制方法差不多，差异在于svg中路径是path标签下d的参数。

go中路径则是存放在geometryString属性中的。

//SVG
<path d="M0 0L0 10"/>

//GO
geometryString:"M0 0L0 10"

go.js 中的绘制效果

如上所示，svg中迁移来的路径在go.js中并没有被正常加载，准确来讲 二次贝塞尔曲线的映射T并没有被执行

            $go(go.Shape, {
                geometryString: "M0 50 L20 50 L20 25 L80 25 L80 50L100 50 M20 50 L20 75 L80 75 L80 50 M25 48L25 35L35 35L35 48L45 48L45 35L55 35L55 48L65 48L65 35L75 35L75 48M25 68Q30 44,35 60T45 60T55 60T65 60T75 68",
                fill: "transparent",
                stroke: "red"
            }),

临时解决方案：查过文档在go中对于svg的T属性也是支持的，但实际中并没有奏效。只有将二次贝塞尔曲线中的所有T属性换成Q属性。差异很明显，对照代码可看出。

            $go(go.Shape, {
                geometryString: "M0 50 L20 50 L20 25 L80 25 L80 50L100 50 M20 50 L20 75 L80 75 L80 50 M25 48L25 35L35 35L35 48L45 48L45 35L55 35L55 48L65 48L65 35L75 35L75 48M25 68Q30 44,35 60Q40 76,45 60 Q50 44,55 60Q60 76,65 60Q70 44,75 68",
                fill: "transparent",
                stroke: "red"
            }),

想要实现的建议效果如图所示：

在这里插入图片描述

SVG绘制电路元器件图形与GO.Js绘制元器件电路图形比较

你需要能看的懂SVG中path标签绘制的路径，本篇才对你有意义

svg 曲线

svg绘制代码

go.js 中的绘制效果

猜你喜欢