ActionScript - 使用 JointStyle.MITRE 清除图形 Bug?

发布于 2024-10-01 08:12:40 字数 2443 浏览 3 评论 0原文

在清除/重绘图形时,我遇到了使用 JointStyle.MITER 的不良效果。

我的项目涉及管理具有圆边和锐边的自定义线条图形,这就是为什么我想使用斜接样式。

当线条粗细大大增加时,甚至线条的圆形区域也会受到斜接样式的影响。虽然我觉得这很不幸,但这是可以理解的,而不是我指的错误。当减小线条粗细并不能完全清除图形时,就会出现错误(?),按照代码每次粗细变化时的指示,将线条图形的伪影留在线条曾经所在的位置。工件还留下锋利的边缘,而不仅仅是圆角。

我在 Mac OS X Snow Leopard (10.6.4) 上使用 Flash Player 版本 10.1.53.64。

您可以通过运行下面的示例代码来测试这一点。使用左右键盘箭头更改圆形矩形的描边粗细。

更新:图形伪影是肤浅的。出现后将形状拖动到其位置即可将其删除。代码已更新,具有拖动功能。

package
{
import flash.display.CapsStyle;
import flash.display.JointStyle;
import flash.display.LineScaleMode;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.ui.Keyboard;

public class StrokeWidth extends Sprite
    {
    private var roundRect:Sprite = new Sprite();
    private var strokeThickness:Number = 6;

    public function StrokeWidth()
        {
        addEventListener(Event.ADDED_TO_STAGE, init);
        }

    private function init(evt:Event):void
        {
        removeEventListener(Event.ADDED_TO_STAGE, init);
        stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownEventListener);
        roundRect.addEventListener(MouseEvent.MOUSE_DOWN, mouseEventListener);
        roundRect.addEventListener(MouseEvent.MOUSE_UP, mouseEventListener);

        drawRoundRect();
        roundRect.x = roundRect.y = 100;
        addChild(roundRect);
        }

    private function drawRoundRect():void
        {
        roundRect.graphics.clear();
        roundRect.graphics.lineStyle(strokeThickness, 0x000000, 1.0, true, LineScaleMode.NONE, CapsStyle.NONE, JointStyle.MITER);
        roundRect.graphics.beginFill(0xFF0000);
        roundRect.graphics.drawRoundRect(0, 0, 400, 200, 100);
        }

    private function mouseEventListener(evt:MouseEvent):void
        {
        switch  (evt.type)
                {
                case MouseEvent.MOUSE_DOWN: roundRect.startDrag();  break;
                case MouseEvent.MOUSE_UP:   roundRect.stopDrag();   
                }
        }

    private function keyDownEventListener(evt:KeyboardEvent):void
        {
        switch  (evt.keyCode)
                {
                case Keyboard.LEFT:     strokeThickness -= 1;       break;
                case Keyboard.RIGHT:    strokeThickness += 1;
                }

        drawRoundRect();
        }
    }
}

替代文字

I've come across an undesirable effect of using JointStyle.MITER when clearing/redrawing graphics.

My project involves managing custom line graphics with both round and sharp edges, which is why I would like to use a miter joint style.

When the line thickness is greatly increased, even the round areas of the line are affected by the miter style. While I find this unfortunate, it's understandable and not the bug I'm referring to. the bug(?) occurs when decreasing the line thickness doesn't completely clear the graphics, as instructed to do so by the code each time the thickness changes, leaving artifacts of the line graphics where the line once was. Artifacts are also left by sharp edges, not just rounded corners.

I'm using Flash Player version 10.1.53.64 on Mac OS X Snow Leopard (10.6.4).

You can test this by running my sample code below. use the left and right keyboard arrows change the thickness of the stroke of a round rect.

Update: The graphics artifacts are superficial. Dragging the shape over their location after they appear will remove them. Code updated with dragging functionality.

package
{
import flash.display.CapsStyle;
import flash.display.JointStyle;
import flash.display.LineScaleMode;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.ui.Keyboard;

public class StrokeWidth extends Sprite
    {
    private var roundRect:Sprite = new Sprite();
    private var strokeThickness:Number = 6;

    public function StrokeWidth()
        {
        addEventListener(Event.ADDED_TO_STAGE, init);
        }

    private function init(evt:Event):void
        {
        removeEventListener(Event.ADDED_TO_STAGE, init);
        stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownEventListener);
        roundRect.addEventListener(MouseEvent.MOUSE_DOWN, mouseEventListener);
        roundRect.addEventListener(MouseEvent.MOUSE_UP, mouseEventListener);

        drawRoundRect();
        roundRect.x = roundRect.y = 100;
        addChild(roundRect);
        }

    private function drawRoundRect():void
        {
        roundRect.graphics.clear();
        roundRect.graphics.lineStyle(strokeThickness, 0x000000, 1.0, true, LineScaleMode.NONE, CapsStyle.NONE, JointStyle.MITER);
        roundRect.graphics.beginFill(0xFF0000);
        roundRect.graphics.drawRoundRect(0, 0, 400, 200, 100);
        }

    private function mouseEventListener(evt:MouseEvent):void
        {
        switch  (evt.type)
                {
                case MouseEvent.MOUSE_DOWN: roundRect.startDrag();  break;
                case MouseEvent.MOUSE_UP:   roundRect.stopDrag();   
                }
        }

    private function keyDownEventListener(evt:KeyboardEvent):void
        {
        switch  (evt.keyCode)
                {
                case Keyboard.LEFT:     strokeThickness -= 1;       break;
                case Keyboard.RIGHT:    strokeThickness += 1;
                }

        drawRoundRect();
        }
    }
}

alt text

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

许一世地老天荒 2024-10-08 08:12:40

有趣的。该问题是由于 lineStyle 的缩放模式设置为无而引起的:

LineScaleMode.NONE

将其更改为正常可以修复问题:

LineScaleMode.NORMAL

interesting. the problem was caused because the lineStyle's scale mode was set to none:

LineScaleMode.NONE

changing it to normal fixes the problem:

LineScaleMode.NORMAL
·深蓝 2024-10-08 08:12:40

重新创建形状怎么样?

what about re-creating the shape?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文