Pregunta

Estoy intentando dibujar un trazo rojo (1 espesor) alrededor de un rectángulo redondeado pero la carrera no se está alineando correctamente alrededor de las esquinas redondeadas.

esquinas de mi redondeada del rectángulo tienen un ellipseWidth y ellipseHeight de 40. puesto que son iguales que estoy seguro en el supuesto de que la curvatura de cada esquina comienza en menos de la mitad del tamaño de esquina. así que en vez de sacar mi carrera de todo el camino hasta la esquina voy a terminar la carrera en 20 píxeles antes de la esquina y la curva a 20 píxeles después de la esquina. claro como el barro?

Curiosamente, si dibujo mi carrera de todo el camino alrededor del rectángulo redondeado siguiendo el mismo código, el trazo se dibuja única manera inexacta en torno a estos dos esquinas. Además, si la carrera se incrementa a 2, los huecos ya no son visibles.

//Rounded Rectangle
var rectWidth:uint = 300;
var rectHeight:uint = 100;
var rectCorners:uint = 40;

var rect:Shape = new Shape();
rect.graphics.beginFill(0);
rect.graphics.drawRoundRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight, rectCorners, rectCorners);

//Stroke
var stroke:Shape = new Shape();
stroke.graphics.lineStyle(1, 0xFF0000, 1, true, "normal", "none", "miter", 3);

//Stroke Around Top Right Corner
stroke.graphics.moveTo(rect.x + rectWidth / 2 - rectCorners / 2, rect.y - rectHeight / 2);
stroke.graphics.curveTo(rect.x + rectWidth / 2, rect.y - rectHeight / 2, rect.x + rectWidth / 2, rect.y - rectHeight / 2 + rectCorners / 2);

//Stroke Around Bottom Right Corner  
stroke.graphics.lineTo(rect.x + rectWidth / 2, rect.y + rectHeight / 2 - rectCorners / 2);
stroke.graphics.curveTo(rect.x + rectWidth / 2, rect.y + rectHeight / 2, rect.x + rectWidth / 2 - rectCorners / 2, rect.y + rectHeight / 2);

//Add To Display List
addChild(rect);
addChild(stroke);

text alt


Actualizar

cuanto mayor sea el rect redondo y sus esquinas, tanto más desplazada mi accidente cerebrovascular se convierte. i ya no confía en que mis puntos de curvatura / anclaje para mi curveTo () funciones son correctas soy. ¿Alguna idea? text alt

¿Fue útil?

Solución

¿Por qué no se utiliza para dibujar drawRoundRect la carrera? O utilizar la curva de relleno? O conjunto de accidente cerebrovascular, conjunto de llenado y ENTONCES drawRoundRect?


Ok, a continuación, comprobar este código:

        var rectWidth:Number = 300;
        var rectHeight:Number = 100;
        var rectCorners:Number = 40;

        var rectWidthS:Number = 300 - 1;
        var rectHeightS:Number = 100 - 1;
        var rectCornersS:Number = 40 - 1;

        var rect:Shape = new Shape();
        rect.graphics.beginFill(0);
        rect.graphics.drawRoundRect(0, 0, rectWidth, rectHeight, rectCorners, rectCorners);

        //Stroke
        var stroke:Shape = new Shape();
        stroke.graphics.lineStyle(1, 0xFF0000, 1, true, "normal", "none", "miter", 3);

        //Stroke Around Top Right Corner
        stroke.graphics.moveTo (rectWidthS - rectCornersS / 2, 0);
        stroke.graphics.curveTo(rectWidthS,                   0, rectWidthS, rectCornersS / 2);

        //Stroke Around Bottom Right Corner  
        stroke.graphics.lineTo (rectWidthS,                   rectHeightS - rectCornersS / 2);
        stroke.graphics.curveTo(rectWidthS, rectHeightS, rectWidthS - rectCornersS / 2, rectHeightS);

Es el problema con la manera divertida se calcula la anchura y la altura. Cada vez que desee lugar algo en el píxel ÚLTIMO de alguna forma, usted tiene que colocarlo en Con una posición x + ancho - 1 No estoy seguro de si es perfecto, pero por lo que puedo ver! sí parece que parecen prometedores.


Me dejó rectWidthS y rectHeightS valores intactos, pero después de la modificación a rectCornersS = 40, parece que funciona perfectamente. Echar un vistazo http://img137.imageshack.us/img137/7779/58480490.png . O dejo de ver algo. Entiendo sin embargo que todavía no funcione a la perfección con formas más complejas, pero debería ser factible con bastante trabajo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top