开发者

Insane Graphics.lineStyle behavior

I'd like some help with a little project of mine.

Background: i have a little hierarchy of Sprite derived classes (5 levels starting from the one, that is the root application class in Flex Builder). Width and Height properties are overriden so that my class always remembers it's requested size (not just bounding size around content) and also those properties explicitly set scaleX and scaleY to 1, so that no scaling would ever be involved. After storing those values, draw() method is called to redraw content.

Drawing: Drawing is very straight forward. Only the deepest object (at 1-indexed level 5) draws something into this.graphics object like this:

var gr:Graphics = this.graphics;
gr.clear();

gr.lineStyle(0, this.borderColor, 1, true, LineScaleMode.NONE);
gr.beginFill(0x0000CC);
gr.drawRoundRectComplex(0, 0, this.width, this.height, 10, 10, 0, 0);
gr.endFill();

Further on: There is also MouseEvent.MOUSE_WHEEL event attached to 开发者_高级运维the parent of the object that draws. What handler does is simply resizes that drawing object.

Problem: Screenshot

When resizing sometimes that hairline border line with LineScaleMode.NONE set gains thickness (quite often even >10 px) + it quite often leaves a trail of itself (as seen in the picture above and below blue box (notice that box itself has one px black border)). When i set lineStile thickness to NaN or alpha to 0, that trail is no more happening.

I've been coming back to this problem and dropping it for some other stuff for over a week now.

Any ideas anyone?

P.S. Grey background is that of Flash Player itself, not my own choise.. :D

As requested, a bit more: Application is supposed to be a calendar-timeline with a zooming "feature" (project for a course at university). Thus i have these functions that have something to do with resizing:

        public function performZoom():void
        {
            // Calculate new width:
            var newDayWidth:Number = view.width / 7 * this.calModel.zoom;
            if (newDayWidth < 1)
            {
                newDayWidth = 1;
            }
            var newWidth:int = int(newDayWidth * timeline.totalDays);

            // Calculate day element Height/Width ratio:
            var headerHeight:Number = this.timeline.headerAllDay;
            var proportion:Number = 0;
            if (this.view.width != 0 && this.view.height != 0)
            {
                proportion = 1 / (this.view.width / 7) * (this.view.height - this.timeline.headerAllDay); 
            }

            // Calculate new height:
            var newHeight:int = int(newDayWidth * proportion + this.timeline.headerAllDay);

            // Calculate mouse position scale on X axis:
            var xScale:Number = 0;
            if (this.timeline.width != 0)
            {
                xScale = newWidth / this.timeline.width; 
            }

            // Calculate mouse position scale on Y axis:
            var yScale:Number = 0;
            if (this.timeline.height - this.timeline.headerAllDay != 0)
            {
                yScale = (newHeight - this.timeline.headerAllDay) / (this.timeline.height - this.timeline.headerAllDay);
            }

            this.timeline.beginUpdate();

            // Resize the timeline
            this.timeline.resizeElement(newWidth, newHeight);
            this.timeline.endUpdate();

            // Move timeline:
            this.centerElement(xScale, yScale);

            // Reset timeline local mouse position:
            this.centerMouse();
        }

        public function resizeElement(widthValue:Number, heightValue:Number):void
        {
            var prevWidth:Number = this.myWidth;
            var prevHeight:Number = this.myHeight;

            if (widthValue != prevWidth || heightValue != prevHeight)
            {
                super.width = widthValue;
                super.height = heightValue;
                this.scaleX = 1.0;
                this.scaleY = 1.0;

                this.myHeight = heightValue;
                this.myWidth = widthValue;

                if (!this.docking)
                {
                    this.origHeight = heightValue;
                    this.origWidth = widthValue;
                }

                this.updateAnchorMargins();

                onResizeInternal(prevWidth, prevHeight, widthValue, heightValue);
            }
        }

Yes. I know.. a lot of core, and a lot of properties, but in fact most of the stuff has been disabled at the end and the situation is as described at the top.

this didn't work:

gr.lineStyle(); // Reset line style


Can we see your resizing code?

Also try clearing your line style as well as your fill:

gr.lineStyle(0, this.borderColor, 1, true, LineScaleMode.NONE);
gr.beginFill(0x0000CC);
gr.drawRoundRectComplex(0, 0, this.width, this.height, 10, 10, 0, 0);
gr.endFill();
gr.lineStyle();//<---- add this line


I don't know whether it's flash bug or what it is, but i finally found the solution.

The thing is that in my case when resizing in a nutshell you get like this:

this.width = this.stage.stageWidth / 7 * 365;

When i switch to maximized window this.width gains value 86k+. When i added this piece of code to draw horizontal line, it fixed itself:

        var recWidth:Number = this.width;
        var i:int;
        var newEnd:Number = 0;
        for (i = 1; newEnd < recWidth; i++)
        {
            newEnd = 100 * i;
            if (newEnd > recWidth)
            {
                newEnd = recWidth;
            }
            gr.lineTo(newEnd, 0);
        }

I don't know what is going on.. This is inconvenient...

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜