我試圖通過使用以下代碼使用 svg.js 添加到多邊形陣列來以編程方式創建一個帶有函式的 SVG 多邊形：
const draw = SVG().addTo('body').attr({
viewBox: '0 0 100 100'
})
const {width,height} = draw.viewbox()
const polygon = draw.polygon([])
createPoint(0,0)
createPoint(100,0)
createPoint(100,100)
function createPoint(x,y){
const point = new SVG.Point()
point.x = x
point.y = y
polygon.array().push([point.x,point.y])
}
svg 中不顯示任何內容。有任何想法嗎？提前致謝
uj5u.com熱心網友回復：
您不會將新點推送到先前創建的陣列。
您可以改為設定一個點變數，它將接收新創建的點
let points = [];
createPoint(0,0)
createPoint(100,0)
createPoint(100,100)
const draw = SVG().addTo('body').attr({
viewBox: '0 0 100 100'
})
const draw2 = SVG().addTo('body').attr({
viewBox: '0 0 100 100'
})
let points = [];
createPoint(0,0)
createPoint(100,0)
createPoint(100,100)
let points2 = [];
addPoint(0,0);
addPoint(100,0);
addPoint(100,100);
const polygon = draw.polygon(points)
const polygon2 = draw2.polygon(points)
function createPoint(x,y){
const point = new SVG.Point()
point.x = x
point.y = y
points.push([point.x,point.y])
}
function addPoint(x,y){
points2.push([x, y])
}svg{
display:inline-block;
width:20%
}<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script>但我不確定你為什么需要創建新的 svgPoints。
簡單的 x/y 坐標也可以解決問題。
uj5u.com熱心網友回復：
我和@herrstrietzel 有同樣的預感，他在 18 秒前發布了 :-)。這是一個保留大部分初始 OP 代碼的修復程式......
const draw = SVG().addTo('body').attr({
viewBox: '0 0 100 100'
})
const {width,height} = draw.viewbox()
let pts = [];
function createPoint(x,y){
const point = new SVG.Point()
point.x = x
point.y = y
pts.push([point.x,point.y])
}
createPoint(5,5)
createPoint(25,25)
createPoint(35,10)
const polygon = draw.polygon(pts)<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
<body/>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453582.html
標籤：javascript svg.js