Seonglae Cho
SVG: Circle Arc
Interactive Circle Arc The only way to draw an arc of a circle (such as used in pie chart), is by using the path element with the A command. [see SVG Path: Elliptical Arc] The path A command is not easy to understand.
http://xahlee.info/js/svg_circle_arc.html
- 메인 참고 svg 로 그려야겠다는 아이디어 얻음
Use SVG icon as marker in OpenLayers
Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.
https://stackoverflow.com/questions/37829941/use-svg-icon-as-marker-in-openlayers
- 이거는 svg text로 ol source 사용하는 법
How to convert the html object to string type?
Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.
https://stackoverflow.com/questions/12344832/how-to-convert-the-html-object-to-string-type
- 이거는 어째 component string 으로 하나 outerHTML 간단스키
setAttributeNS xmlns of for a general-purpose library
It appears web browsers throw a DOMException when one uses setAttributeNS on a element to set the xmlns attribute. i.e. >>> s = document.createElementNS('http://www.w3.org/2000/svg', 'svg') >>> s.setAttributeNS(null, 'xmlns', '123') Uncaught DOMException: Failed to execute 'setAttributeNS' on 'Element': '' is an invalid namespace for attributes.
https://stackoverflow.com/questions/52571125/setattributens-xmlns-of-svg-for-a-general-purpose-library
- 당황한 부분인데 attrribute xmlns 주기가 안되길래 검색해보니 요거
drawCompass = (coor) => { // round Area feature = new ol.Feature({ geometry: coor }) feature.setStyle(styles.circleAlpha) correctionLayer.getSource().addFeature(feature) // Compass let arc = arcSVG(COMP_RAD,COMP_RAD,COMP_RAD/2,COMP_RAD/2,30,170,164) let svg = makeSVGbyPath(arc, COMP_RAD) console.log('', svg) let img = new ol.style.Icon({ src: 'data:image/svg+xml;utf8,' + svg.outerHTML }) let arcStyle = new ol.style.Style({ image: img }) arcStyle.setZIndex(ZINDEX_SEL) feature = new ol.Feature({ geometry: coor }) feature.setStyle(arcStyle) correctionLayer.getSource().addFeature(feature) }
Compass 전체 그리는 부분
makeSVGbyPath = (path, radius) => { let svg = document.createElement("svg") svg.appendChild(path) svg.setAttributeNS(null, 'style', `stroke:rgb(37, 51, 99); fill:none; stroke-width:2`) svg.setAttributeNS(null, 'width', `${radius*2}`) svg.setAttributeNS(null, 'height', `${radius*2}`) svg.setAttributeNS(null, 'version', "1.1") svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg') return svg }
SVG를 Path 로 그리는 부분
arcSVG = (cx,cy,rx,ry, t1, angle, radian ) => { angle = angle % (2*π); let rotMatrix = f_rotate_matrix (radian); let [sX, sY] = ( f_vec_add ( f_matrix_times ( rotMatrix, [rx * cos(t1), ry * sin(t1)] ), [cx,cy] ) ) let [eX, eY] = ( f_vec_add ( f_matrix_times ( rotMatrix, [rx * cos(t1+angle), ry * sin(t1+angle)] ), [cx,cy] ) ) let fA = ( ( angle > π ) ? 1 : 0 ) let fS = ( ( angle > 0 ) ? 1 : 0 ) let path_2wk2r = document. createElementNS("http://www.w3.org/2000/svg", "path") path_2wk2r.setAttribute("d", "M " + sX + " " + sY + " A " + [ rx , ry , radian / (2*π) *360, fA, fS, eX, eY ].join(" ")) return path_2wk2r; }