5/10/2010 11:07:59 PM
Title:
Editable region on an image
I am working on a flex project now. The issue what I am facing is, I have a product image, say 300*300. I want to put some custom designs on that product(say a T-shirt). For that I have to make a workable area on that image, and that workable area depends on the product size. i.e if the product is a tea cup, I don't need a work area as big as the work area for a T-shirt. So I want to know how to built a work area on an image so that it detects the size of the image and resize automatically. Can anybody help me on this please?
5/11/2010 2:00:40 AM
first of all what is your work area is a it an area to write text or free hand or area to place some image etc . You can use the mask to show only the visible region.
Davis
Points: 780
Posts:0
5/11/2010 2:04:43 AM
Place a canvas on the image with required dimensions an alpha property set to 0.1 so that it shows up like a transparent box over image as editable area.
Resizing of canvas can be done on percentage basis of image. Like if image is 300 then the editable area should be 50 percent of main image which is 150 pixels. similarly if image is 200 px then its editable area can be 50% equal to 100px;
5/11/2010 2:59:39 AM
Ok guys, first of all thanks for taking the time to review it. I also thought of the same solutions. But there lies the problem. Suppose I want to place some designs (any logo or text of my choice)on a T-Shirt's front part. There I will get the complete front area to work with. But then I want to place some images or text on the sleeves of the T-Shirt. There the space for designing will be less. As Davis said, I can control the width of the canvas, but the thing is that, the canvas(or editable region) must be exactly positioned on the sleeve and it should not go to the shoulder or other part. (for eg: I want to place my design on a CAP. So the area should be exactly on the front part of the cap and not elsewhere). So this is the issue. Or is there anything I can do with ImageMapping? If so can you guys please explain how..
Kiney
Points: 600
Posts:0
5/11/2010 3:20:20 AM
Your problem is that there are multiple areas editable and they are not symmetrical. I think the best solution would be to place a canvas and mask it with the predefined movieclips or you can draw movieclips on sleeves and body on runtime and mask your main canvas with it. This way the user will be able to place things only in the masked area. You can capture the bitmap of the image and save.
5/11/2010 11:07:01 AM
Kiney is giving right solution. This is the only good suggestion for this requirement.