0
202
Views¿Cómo puedo dibujar un arco de media luna creciente desde el punto a al punto b en HTML?
Quiero dibujar lazos entre dos notas como en esta imagen usando html css javascript svg, etc. 
Encontré una manera de dibujar una forma de media luna como esta, pero no puedo controlar el ancho de esto.
span.tie { user-select: none; font-family: Bravura; --line-width: 0.03em; position: absolute; font-size: 1em; line-height: 4em; width: 1em; height: 1em; border-radius: 50%; box-shadow: -0.02em 0.02em black; transform: translate(1em, 1em) rotate(135deg); } <span class="tie"></span>Porque no es exactamente una media luna, es menos profunda en altura más como una curva bezier.
1 answers
Answer question0
Entonces usé svg para administrar la creación de esta forma:
function tie(pitch: Pitch, octave: Octave, x1: number, x2: number) { let make_mask_id = 'mask_' + [pitch, octave, x1, x2].join('_') let y1 = pitch_y(pitch, octave) let w = (x2 - x1) *0.4, hw = w/ 2 let scale_y = w > 3 ? 14/w * 0.2 : 1 return h('svg.tie', { style: { transform: `translate(calc(${2+0.05 +x1*0.25 - w*0.16}em), calc(${y1-w*0.12-(scale_y*3-2)*0.15} em)) scaleY(${scale_y})` }, attrs: { width: `${w}em`, height: `${w}em`, viewBox: '0 0 100 100' } }, [ h('defs', [ h('mask', { attrs: { id: make_mask_id }}, [h('circle', { attrs: { cx: `${50}`, cy: `${50}`, r: `${200}`, fill: 'white' } }),/* h('rect', { attrs: { x: 0, y: 0, width: `${hw}em`, height: `${hw}em`, fill: 'black' } }), */ h('circle', { attrs: { cx: `50`, cy: `${66-0.1*Math.sqrt(2*w)}`, r: `${60+0.4*Math.sqrt(10*w)}`, fill: 'bla ck' } }), h('circle', { attrs: { cx: `10`, cy: `50`, r: `40`, fill: 'black' } }), h('circle', { attrs: { cx: `90`, cy: `50`, r: `40`, fill: 'black' } }), ]) ]), h('circle', { attrs: { cx: `50`, cy: `50`, r: `50`, fill: 'black', mask:`url(#${make_mask_id})` } }) ] ) }Se parece a esto:
<svg class="tie" width="1em" height="1em" viewBox="0 0 100 100" style="transform: translate(calc(1.9em), calc(0.48em));"><defs><mask id="m1"><circle cx="50" cy="50" r="200" fill="white"></circle><circle cx="50" cy="64" r="61" fill="black"></circle><circle cx="10" cy="50" r="40" fill="black"></circle><circle cx="90" cy="50" r="40" fill="black"></circle></mask></defs><circle cx="50" cy="50" r="50" fill="black" mask="url(#m1)"></circle></svg> <svg class="tie" width="7em" height="7em" viewBox="0 0 100 100" style="transform: translate(calc(1em), calc(1em));"><defs><mask id="m1"><circle cx="50" cy="50" r="200" fill="white"></circle><circle cx="50" cy="52" r="67" fill="black"></circle><circle cx="10" cy="50" r="40" fill="black"></circle><circle cx="90" cy="50" r="40" fill="black"></circle></mask></defs><circle cx="50" cy="50" r="50" fill="black" mask="url(#m1)"></circle></svg>El único problema es que no puedo controlar el grosor de esta línea. A medida que aumenta el ancho, el grosor se vuelve demasiado grueso.
Por favor, alguien modifique esta solución para tener en cuenta el grosor de la línea para anchos más grandes.
Editar
Noté que estaba usando la misma identificación, en la versión anterior, así que me aseguré de que cada elemento tenga una identificación de máscara única, lo que ayudó con los ajustes. Me preguntaba por qué mis cambios en la máscara no se reflejan en el renderizado.