使用画布

时间:2017-05-19 20:38:14

标签: javascript canvas svg

我试图从这篇Codrops文章中扩展JS:

https://tympanus.net/Development/StorytellingMap/

我尝试将多个SVG线设置为动画,以便"分割" SVG路径。为了模拟它,我创建了多个彼此重叠的路径。相关的SVG代码就是这样(for reference, example):

<g id="trail-path" display="none">
    <path display="inline" d="M1058.75,817.41a159.76,159.76,0,0,0,11.15-18.24c1.16-2.23,2.31-4.72,1.75-7.17-.64-2.81-3.29-4.65-5.8-6.06a77.9,77.9,0,0,0-29.34-9.42c-4.94-.55-10-.63-14.73-2.09s-9-4.25-13.21-7Q982,749.77,956.19,731.08c-5.52-4-6.81-10.78-7.54-17.56s-1.07-14-5.05-19.56c-6.48-9-20-10.06-27.26-18.47-6.31-7.34-6.07-18.23-4-27.69.83-3.83,1.91-7.67,1.73-11.59-.33-7-4.6-13.1-8.71-18.77-5.63-7.76-11.87-16-21-18.91-6-1.91-10.76-6.9-15-11.53s-8.06-9.68-12.69-13.93c-6-5.48-13.25-9.54-18.62-15.63-6.34-7.2-9.47-16.58-13-25.51-.94-2.38-2.11-5-4.46-6-10.45-4.59-20.41-11.33-27.17-20.53-3.37-4.58-5.63-9.85-7.87-15.07-2.61-6.1-5.27-12.39-5.4-19-.17-8.82,4.17-17.39,3.26-26.16-.5-4.79-2.53-9.26-4.53-13.64l-15.15-33.08 
M1058.75,817.41a159.76,159.76,0,0,0,11.15-18.24c1.16-2.23,2.31-4.72,1.75-7.17-.64-2.81-3.29-4.65-5.8-6.06a77.9,77.9,0,0,0-29.34-9.42c-4.94-.55-10-.63-14.73-2.09s-9-4.25-13.21-7Q982,749.77,956.19,731.08c-5.52-4-6.81-10.78-7.54-17.56s-1.07-14-5.05-19.56c-6.48-9-20-10.06-27.26-18.47-6.31-7.34-6.07-18.23-4-27.69,2.67-12.28-.83-25.88,6.72-36.71,3.74-5.37,9.15-9.33,13.36-14.35,11.71-14,12.1-36.16.89-50.53-7.54-9.65-19.06-15.39-27.38-24.38-5.24-5.66-9.07-12.45-12.85-19.17" fill="none" stroke="red" stroke-miterlimit="10" stroke-width="5"/>
</g>

我90%确定我应该主要关注的代码就在这里。我只需要一种方法来为每个路径组件迭代它。我正在看&#34; t.trailPath&#34;和#34;#trail-path。&#34;中包含的路径我最初尝试了多个分组路径元素并迭代它们但它没有工作(并且理所当然,因为我意识到这是错误的方法)。

(0, p.default)(this.props.mapSrc).then(function(e) {
                        t.mapSVG = Array.from((new DOMParser).parseFromString(e, "image/svg+xml").childNodes).filter(function(t) {
                            var e = t.tagName;
                            return "undefined" == typeof e ? !1 : "svg" == e.toLowerCase()
                        })[0], t.cameraPath = t.mapSVG.querySelector("#camera-path path"), t.trailPath = t.mapSVG.querySelector("#trail-path path"), t.points = Array.from(t.mapSVG.querySelectorAll("#points circle")).map(function(e) {
                            var i = parseFloat(e.getAttribute("cx")),
                                r = parseFloat(e.getAttribute("cy"));
                            return {
                                x: i,
                                y: r,
                                length: d.getLengthAtPoint(t.trailPath, {
                                    x: i,
                                    y: r
                                }),
                                label: (e.getAttribute("id") || "").replace(/_/g, " "),
                                color: e.getAttribute("fill") || "black",
                                radius: parseFloat(e.getAttribute("r"))
                            }
                        }).sort(function(t, e) {
                            return t.length - e.length
                        }), t.cameraSubdivisions = d.subdividePath(t.cameraPath, t.cameraSubdivisionSize, !0), t.cameraLength = d.getLength(t.cameraPath), t.cameraBreakpoints = t.setupBreakpoints(t.cameraPath), t.trailSubdivisions = d.subdividePath(t.trailPath, t.trailSubdivisionSize, !0), t.trailBreakpoints = t.setupBreakpoints(t.trailPath), t.trailLength = d.getLength(t.trailPath), (0, l.loadImage)(t.props.mapSrc).then(function(e) {
                            t.mapWidth = e.width, t.mapHeight = e.height, 0 == t.mapHeight && (t.mapWidth = 2040, t.mapHeight = 1178), t.map = b(t.mapScales).map(function(i, r) {
                                var n = 1 + (t.mapMaxScale - 1) / (t.mapScales - 1) * r,
                                    s = (0, h.default)(t.mapWidth * n, t.mapHeight * n),
                                    a = s.getContext("2d", {
                                        alpha: !1
                                    });
                                return a.fillStyle = "#a8cecf", a.fillRect(0, 0, t.mapWidth * n, t.mapHeight * n), a.drawImage(e, 0, 0, t.mapWidth * n, t.mapHeight * n), {
                                    map: s,
                                    scale: n
                                }
                            }), t.mapBuffer = (0, h.default)(1, 1), t.mapBufferCtx = t.mapBuffer.getContext("2d", {
                                alpha: !1
                            }), t.updateMapBufferSize(), t.mapBufferCtx.fillStyle = "#a8cecf", t.mapBufferCtx.fillRect(0, 0, t.mapBufferSize.x, t.mapBufferSize.y), t.mapBufferOffset = {
                                x: 0,
                                y: 0
                            }, t.mapBufferScale = t.mapScale, t.ready = !0, document.addEventListener("scroll", t.onScroll.bind(t)), t.onScroll()
                        })
                    })

该网站供参考。它没有更新,以包括尝试,因为它显然打破了它。它将焦点放在Giarratana和Chiaramonte旁边,但是没有骰子可以追踪或突出显示路径。

https://adrianatwell.github.io/bond-of-strangers/code/html/

此处的代码仅供参考。它的6.5K线虽然没有多大帮助。

https://github.com/adrianatwell/bond-of-strangers/blob/master/code/html/assets/js/app.js

我似乎已经开始使用这个脚本了,在过去的72小时里,我一直在使用它和Google。哈哈。

0 个答案:

没有答案