Rounded canvas
Is there anyway to get a rounded canvas? Whenever I save a
rounded object as a bitmap, it always has the white corners of the
canvas. I tried setting canvas to transparent but that didn't work.
Can anyone help me?
To get a rounded canvas, you are probably using a rounded
rectangle. If you
want a fixed-size canvas, then the rectangle alone is fine.
There are ways
to make it "stretchy". If you need one of those tutorials,
just ask and I
will hunt up the link. If your canvas is transparent, then
you need to
export in GIF. If you export in JPG, the transparent areas
will always be
white because JPG doesn't do transparent. Best thing is to
post a link to
what you have so we can see what you are getting. -- Tony
"aff502" <[email protected]> wrote in
message
news:e7siss$9qu$[email protected]..
> Is there anyway to get a rounded canvas? Whenever I save
a rounded object
> as a
> bitmap, it always has the white corners of the canvas. I
tried setting
> canvas
> to transparent but that didn't work. Can anyone help me?
>
Similar Messages
-
What Is The Best All-round Canvas Size For A Web Browser
What is the best all-round canvas size when authoring a swi
for a web browser? by this I mean best for authoring without
scrollbars. I know a chap whose screen res is 800x600 and who has
every single toolbar displayed in IE, leaving around 400pixels in
height free. For crying out loud.
I once sat with a bloke who uses Courier New set at 36pt as
his default browser font. Ouch. I sat there transfixed, not
believing what I was looking at; to this day I have no recollection
of our conversation, so stunned was I.
I've used 780x410, 800x600, 770x540 and I'm going nutsoid
trying to find the best compromise; whatever size I use, distortion
creeps in if accompanied with an "exactfit" value, especially if
the height and Width values are set at 100%.
Beats me.
What are you guys using?Hrududu wrote:
> What is the best all-round canvas size when authoring a
swi for a web browser?
> by this I mean best for authoring without scrollbars. I
know a chap whose
> screen res is 800x600 and who has every single toolbar
displayed in IE, leaving
> around 400pixels in height free. For crying out loud.
>
> I once sat with a bloke who uses Courier New set at 36pt
as his default
> browser font. Ouch. I sat there transfixed, not
believing what I was looking
> at; to this day I have no recollection of our
conversation, so stunned was I.
>
> I've used 780x410, 800x600, 770x540 and I'm going
nutsoid trying to find the
> best compromise; whatever size I use, distortion creeps
in if accompanied with
> an "exactfit" value, especially if the height and Width
values are set at 100%.
personally avoid scaling, especially filling up user window.
more and more really high resolution monitors out there,
the larger the screen the more CPU it sucks...
Don't follow the exact screen size like 800x600 as it is
never the
browser ratio, must consider the browser chromes.
I will design something within that size or slightly larger
and use the
around margin to incorporate graphics as part of the design.
Sometimes even smaller than that and centralized. Depends on
amount
of content. -
Safari doesn't load pages containing html5 canvas on iMac
Suddenly Safari either is very slow to load or doesn't load some pages at all.
I have tracked it down to be pages containing html5 canvas element.
This happens only on iMac and Macbook Air. It doesn't happen on iPad nor on Safari on a Pc. It will happen on the Mac computer both when the pages are out on the internet and when the pages ar locally stored. It's driving me absolutely mad!
I've tried emptying cache both through Safari menu and by removing Safari's Cache.db, I've reset Safari preferences, restarted, and changed DNS to Open DNS (though it seems strange it should be an issue since the problem also occurs when I run the site on localhost).
If I open the page directly entering the url in the adressbar it works fine, it is when I try to access it from a link on another page on the site it doesn't load. If I press reload it will load fine. The link from other pages can be either an html <a href="url"> tag or javascript window.location or window.location.href neither works. The weird thing is it worked fine until just yesterday. And it works fine on every other machine except the Macintoshes. WHYHi Carolyn,
Thanks for the quick reply. I've tried everything you wrote now, however the problem remains.
One thing I've noted though is that the page actually loads but it takes very very long time, and sometimes when the pages have been loaded the images doesn't look quite right until I hit the reload button.
I've been thinking about another thing, there are a lot of effects like round corner, shape and text shadow, can it be these that cause the problem? I still think it is very strange though that it all of a sudden stopped working and that running it on PC or iPad everything is just fine.
Another thing to add is that the computer is very new just got it like 2-3 weeks ago, and haven't hardly added anything except got Xcode, macVim, firefox and Filezilla.
Also just before the problem appeared I ran a page with javascript that had me caught in an endless loop of alerts. Got that fixed, but ever since that some pages won't load correclty...
Is there possibly anything else I can do to fix this? -
A script to increase the minimum canvas size? (Like Fit Image, but with just my canvas)
For starters to be clear, I'm looking to manipulate canvas size. Not image size.
I want to create a script to automatically increase the width and height of my canvas in Photoshop to a specific size when necessary. I only want this to happen if my canvas is less than that specified size. For example: Let's say my canvas size is 300x250. I want the canvas to be at LEAST 600x600. If I run my action it will increase the canvas size to 600x600 for me. If I run this same script on an image where the canvas size is already 700x700, it won't do anything at all to it because both the width and height are equal to or greater than my target size.
It would also need to work with the height and width on an individual basis. If my image is 400x800, the action would increase my width from 400 to 600, but it would leave the height of 800 alone. So the final canvas size will end up being 600x800.
It's kind of like the "Fit Image" option in Photoshop, but I only want to manipulate my canvas size, NOT my image size.It is possible.
But if you hope that the dialog remembers the last settings that would require storing those values (which could be done with a txt-file at some pre-defined location), but it would make the Script a bit more complicated.
// resize canvas in either direction if it is below a defined minimum;
// 2011; use it at your own risk;
#target photoshop
if (app.documents.length > 0) {
// dialog;
var dlg = new Window("dialog", "increase width and height if under", [500,300,750,380]);
// filter for checking if entry is numeric, thanks to xbytor;
numberKeystrokeFilter = function() {
if (this.text.match(/[^\-\.\d]/)) {
this.text = this.text.replace(/[^\d]/g, "")
if (Number(this.text <= 0)) {this.text = 5};
this.text = Math.round(Number(this.text));
// fields for entry;
dlg.hor = dlg.add("edittext", [14,15,88,35], "600", {multiline:false});
dlg.hor.onChange = numberKeystrokeFilter;
dlg.horText = dlg.add("statictext", [93,15,118,35], "px", {multiline:false});
dlg.ver = dlg.add("edittext", [129,15,210,35], "600", {multiline:false});
dlg.ver.onChange = numberKeystrokeFilter;
dlg.verText = dlg.add("statictext", [215,15,240,35], "px", {multiline:false});
dlg.hor.active = true;
// ok- and cancel-button;
dlg.buildBtn = dlg.add("button", [13,45,118,68], "OK", {name:"ok"});
dlg.cancelBtn = dlg.add("button", [128,45,240,68], "Cancel", {name:"cancel"});
// show dialog;
dlg.center();
// show dialog;
var myReturn = dlg.show ();
// proceed if ok-ed;
if (myReturn == 1) {
var myDocument = app.activeDocument;
// set to pixels;
var originalRulerUnits = app.preferences.rulerUnits;
app.preferences.rulerUnits = Units.PIXELS;
// set the minimum values;
var minWidth = Number(dlg.hor.text);
var minHeight = Number(dlg.ver.text);
// get current ones;
var theWidth = myDocument.width;
var theHeight = myDocument.height;
// resize canvas;
myDocument.resizeCanvas(Math.max(minWidth, theWidth), Math.max(minHeight, theHeight), AnchorPosition.MIDDLECENTER);
// reset;
app.preferences.rulerUnits = originalRulerUnits; -
Overlay Images and Shapes on the same canvas
The example copde below was taken from: http://math.hws.edu/eck/cs124/javanotes3/source/
Is it possible to update the code so that images (jpg,gif) can be added as well as shapes?
Any help with this is much appreciated.
The ShapeDraw applet lets the user add small colored shapes to
a drawing area and then drag them around. The shapes are rectangles,
ovals, and roundrects. The user adds a shape to the canvas by
clicking on a button. The shape is added at the upper left corner
of the canvas. The color of the shape is given by the current
setting of a pop-up menu. The user can drag the shapes with the
mouse. Ordinarily, the shapes maintain a given back-to-front order.
However, if the user shift-clicks on a shape, that shape will be
brought to the front.
A menu can be popped up on a shape (by right-clicking or performing
some othe platform-dependent action). This menu allows the user
to change the size and color of a shape. It is also possible to
delete the shape and to bring it to the front.
This file defines the applet class plus several other classes used
by the applet, namely: ShapeCanvas, Shape, RectShape, OvalShape,
and RoundRectShape.
David Eck
July 28, 1998
import java.awt.*;
import java.awt.event.*;
import java.applet.Applet;
import java.util.Vector;
public class ShapeDrawWithMenu extends Applet {
public void init() {
// Set up the applet's GUI. It consists of a canvas, or drawing area,
// plus a row of controls below the canvas. The controls include three
// buttons which are used to add shapes to the canvas and a Choice menu
// that is used to select the color used for a shape when it is created.
// The canvas is set as the "listener" for these controls so that it can
// respond to the user's actions. (The pop-up menu is created by the canvas.)
setBackground(Color.lightGray);
ShapeCanvas canvas = new ShapeCanvas(); // create the canvas
Choice colorChoice = new Choice(); // color choice menu
colorChoice.add("Red");
colorChoice.add("Green");
colorChoice.add("Blue");
colorChoice.add("Cyan");
colorChoice.add("Magenta");
colorChoice.add("Yellow");
colorChoice.add("Black");
colorChoice.add("White");
colorChoice.addItemListener(canvas);
Button rectButton = new Button("Rect"); // buttons for adding shapes
rectButton.addActionListener(canvas);
Button ovalButton = new Button("Oval");
ovalButton.addActionListener(canvas);
Button roundRectButton = new Button("RoundRect");
roundRectButton.addActionListener(canvas);
Panel bottom = new Panel(); // a Panel to hold the control buttons
bottom.setLayout(new GridLayout(1,4,3,3));
bottom.add(rectButton);
bottom.add(ovalButton);
bottom.add(roundRectButton);
bottom.add(colorChoice);
setLayout(new BorderLayout(3,3));
add("Center",canvas); // add canvas and controls to the applet
add("South",bottom);
public Insets getInsets() {
// Says how much space to leave between the edges of the applet and the
// components in the applet.
return new Insets(3,3,3,3);
} // end class ShapeDraw
class ShapeCanvas extends Canvas implements ActionListener, ItemListener,
MouseListener, MouseMotionListener {
// This class represents a canvas that can display colored shapes and
// let the user drag them around. It uses an off-screen images to
// make the dragging look as smooth as possible. A pop-up menu is
// added to the canvas that can be used to performa certain actions
// on the shapes;
Image offScreenCanvas = null; // off-screen image used for double buffering
Graphics offScreenGraphics; // graphics context for drawing to offScreenCanvas
Vector shapes = new Vector(); // holds a list of the shapes that are displayed on the canvas
Color currentColor = Color.red; // current color; when a shape is created, this is its color
ShapeCanvas() {
// Constructor: set background color to white, set up listeners to respond to mouse actions,
// and set up the pop-up menu
setBackground(Color.white);
addMouseListener(this);
addMouseMotionListener(this);
popup = new PopupMenu();
popup.add("Red");
popup.add("Green");
popup.add("Blue");
popup.add("Cyan");
popup.add("Magenta");
popup.add("Yellow");
popup.add("Black");
popup.add("White");
popup.addSeparator();
popup.add("Big");
popup.add("Medium");
popup.add("Small");
popup.addSeparator();
popup.add("Delete");
popup.add("Bring To Front");
add(popup);
popup.addActionListener(this);
} // end construtor
synchronized public void paint(Graphics g) {
// In the paint method, everything is drawn to an off-screen canvas, and then
// that canvas is copied onto the screen.
makeOffScreenCanvas();
g.drawImage(offScreenCanvas,0,0,this);
public void update(Graphics g) {
// Update method is called when canvas is to be redrawn.
// Just call the paint method.
paint(g);
void makeOffScreenCanvas() {
// Erase the off-screen canvas and redraw all the shapes in the list.
// (First, if canvas has not yet been created, then create it.)
if (offScreenCanvas == null) {
offScreenCanvas = createImage(getSize().width,getSize().height);
offScreenGraphics = offScreenCanvas.getGraphics();
offScreenGraphics.setColor(getBackground());
offScreenGraphics.fillRect(0,0,getSize().width,getSize().height);
int top = shapes.size();
for (int i = 0; i < top; i++) {
Shape s = (Shape)shapes.elementAt(i);
s.draw(offScreenGraphics);
public void itemStateChanged(ItemEvent evt) {
// This is called to respond to item events. Such events
// can only be sent by the color choice menu,
// so respond by setting the current color according to
// the selected item in that menu.
Choice colorChoice = (Choice)evt.getItemSelectable();
switch (colorChoice.getSelectedIndex()) {
case 0: currentColor = Color.red; break;
case 1: currentColor = Color.green; break;
case 2: currentColor = Color.blue; break;
case 3: currentColor = Color.cyan; break;
case 4: currentColor = Color.magenta; break;
case 5: currentColor = Color.yellow; break;
case 6: currentColor = Color.black; break;
case 7: currentColor = Color.white; break;
public void actionPerformed(ActionEvent evt) {
// Called to respond to action events. The three shape-adding
// buttons have been set up to send action events to this canvas.
// Respond by adding the appropriate shape to the canvas. This
// also be a command from a pop-up menu.
String command = evt.getActionCommand();
if (command.equals("Rect"))
addShape(new RectShape());
else if (command.equals("Oval"))
addShape(new OvalShape());
else if (command.equals("RoundRect"))
addShape(new RoundRectShape());
else
doPopupMenuCommand(command);
synchronized void addShape(Shape shape) {
// Add the shape to the canvas, and set its size/position and color.
// The shape is added at the top-left corner, with size 50-by-30.
// Then redraw the canvas to show the newly added shape.
shape.setColor(currentColor);
shape.reshape(3,3,50,30);
shapes.addElement(shape);
repaint();
// ------------ This rest of the class implements dragging and the pop-up menu ---------------------
PopupMenu popup;
Shape selectedShape = null; // This is null unless a menu has been popped up on this shape.
Shape draggedShape = null; // This is null unless a shape has been selected for dragging.
int prevDragX; // During dragging, these record the x and y coordinates of the
int prevDragY; // previous position of the mouse.
Shape clickedShape(int x, int y) {
// Find the frontmost shape at coordinates (x,y); return null if there is none.
for ( int i = shapes.size() - 1; i >= 0; i-- ) { // check shapes from front to back
Shape s = (Shape)shapes.elementAt(i);
if (s.containsPoint(x,y))
return s;
return null;
void doPopupMenuCommand(String command) {
// Handle a command from the pop-up menu.
if (selectedShape == null) // should be impossible
return;
if (command.equals("Red"))
selectedShape.setColor(Color.red);
else if (command.equals("Green"))
selectedShape.setColor(Color.green);
else if (command.equals("Blue"))
selectedShape.setColor(Color.blue);
else if (command.equals("Cyan"))
selectedShape.setColor(Color.cyan);
else if (command.equals("Magenta"))
selectedShape.setColor(Color.magenta);
else if (command.equals("Yellow"))
selectedShape.setColor(Color.yellow);
else if (command.equals("Black"))
selectedShape.setColor(Color.black);
else if (command.equals("White"))
selectedShape.setColor(Color.white);
else if (command.equals("Big"))
selectedShape.resize(75,45);
else if (command.equals("Medium"))
selectedShape.resize(50,30);
else if (command.equals("Small"))
selectedShape.resize(25,15);
else if (command.equals("Delete"))
shapes.removeElement(selectedShape);
else if (command.equals("Bring To Front")) {
shapes.removeElement(selectedShape);
shapes.addElement(selectedShape);
repaint();
synchronized public void mousePressed(MouseEvent evt) {
// User has pressed the mouse. Find the shape that the user has clicked on, if
// any. If there is a shape at the position when the mouse was clicked, then
// start dragging it. If the user was holding down the shift key, then bring
// the dragged shape to the front, in front of all the other shapes.
int x = evt.getX(); // x-coordinate of point where mouse was clicked
int y = evt.getY(); // y-coordinate of point
if (evt.isPopupTrigger()) { // If this is a pop-up menu event that
selectedShape = clickedShape(x,y); // occurred over a shape, record which shape
if (selectedShape != null) // it is and show the menu.
popup.show(this,x,y);
else {
draggedShape = clickedShape(x,y);
if (draggedShape != null) {
prevDragX = x;
prevDragY = y;
if (evt.isShiftDown()) { // Bring the shape to the front by moving it to
shapes.removeElement(draggedShape); // the end of the list of shapes.
shapes.addElement(draggedShape);
repaint(); // repaint canvas to show shape in front of other shapes
synchronized public void mouseDragged(MouseEvent evt) {
// User has moved the mouse. Move the dragged shape by the same amount.
if (draggedShape != null) {
int x = evt.getX();
int y = evt.getY();
draggedShape.moveBy(x - prevDragX, y - prevDragY);
prevDragX = x;
prevDragY = y;
repaint(); // redraw canvas to show shape in new position
synchronized public void mouseReleased(MouseEvent evt) {
// User has released the mouse. Move the dragged shape, then set
// shapeBeingDragged to null to indicate that dragging is over.
// If the shape lies completely outside the canvas, remove it
// from the list of shapes (since there is no way to ever move
// it back onscreen).
int x = evt.getX();
int y = evt.getY();
if (draggedShape != null) {
draggedShape.moveBy(x - prevDragX, y - prevDragY);
if ( draggedShape.left >= getSize().width || draggedShape.top >= getSize().height ||
draggedShape.left + draggedShape.width < 0 ||
draggedShape.top + draggedShape.height < 0 ) { // shape is off-screen
shapes.removeElement(draggedShape); // remove shape from list of shapes
draggedShape = null;
repaint();
else if (evt.isPopupTrigger()) { // If this is a pop-up menu event that
selectedShape = clickedShape(x,y); // occurred over a shape, record the
if (selectedShape != null) // shape and show the menu.
popup.show(this,x,y);
public void mouseEntered(MouseEvent evt) { } // Other methods required for MouseListener and
public void mouseExited(MouseEvent evt) { } // MouseMotionListener interfaces.
public void mouseMoved(MouseEvent evt) { }
public void mouseClicked(MouseEvent evt) { }
} // end class ShapeCanvas
abstract class Shape {
// A class representing shapes that can be displayed on a ShapeCanvas.
// The subclasses of this class represent particular types of shapes.
// When a shape is first constucted, it has height and width zero
// and a default color of white.
int left, top; // Position of top left corner of rectangle that bounds this shape.
int width, height; // Size of the bounding rectangle.
Color color = Color.white; // Color of this shape.
void reshape(int left, int top, int width, int height) {
// Set the position and size of this shape.
this.left = left;
this.top = top;
this.width = width;
this.height = height;
void resize(int width,int height) {
// Set the size without changing the position
this.width = width;
this.height = height;
void moveTo(int x, int y) {
// Move upper left corner to the point (x,y)
this.left = x;
this.top = y;
void moveBy(int dx, int dy) {
// Move the shape by dx pixels horizontally and dy pixels veritcally
// (by changing the position of the top-left corner of the shape).
left += dx;
top += dy;
void setColor(Color color) {
// Set the color of this shape
this.color = color;
boolean containsPoint(int x, int y) {
// Check whether the shape contains the point (x,y).
// By default, this just checks whether (x,y) is inside the
// rectangle that bounds the shape. This method should be
// overridden by a subclass if the default behaviour is not
// appropriate for the subclass.
if (x >= left && x < left+width && y >= top && y < top+height)
return true;
else
return false;
abstract void draw(Graphics g);
// Draw the shape in the graphics context g.
// This must be overriden in any concrete subclass.
} // end of class Shape
class RectShape extends Shape {
// This class represents rectangle shapes.
void draw(Graphics g) {
g.setColor(color);
g.fillRect(left,top,width,height);
g.setColor(Color.black);
g.drawRect(left,top,width,height);
class OvalShape extends Shape {
// This class represents oval shapes.
void draw(Graphics g) {
g.setColor(color);
g.fillOval(left,top,width,height);
g.setColor(Color.black);
g.drawOval(left,top,width,height);
boolean containsPoint(int x, int y) {
// Check whether (x,y) is inside this oval, using the
// mathematical equation of an ellipse.
double rx = width/2.0; // horizontal radius of ellipse
double ry = height/2.0; // vertical radius of ellipse
double cx = left + rx; // x-coord of center of ellipse
double cy = top + ry; // y-coord of center of ellipse
if ( (ry*(x-cx))*(ry*(x-cx)) + (rx*(y-cy))*(rx*(y-cy)) <= rx*rx*ry*ry )
return true;
else
return false;
class RoundRectShape extends Shape {
// This class represents rectangle shapes with rounded corners.
// (Note that it uses the inherited version of the
// containsPoint(x,y) method, even though that is not perfectly
// accurate when (x,y) is near one of the corners.)
void draw(Graphics g) {
g.setColor(color);
g.fillRoundRect(left,top,width,height,width/3,height/3);
g.setColor(Color.black);
g.drawRoundRect(left,top,width,height,width/3,height/3);
}Manveer-Singh
Please don't post in old threads that are long dead. When you have a question, please start a topic of your own. Feel free to provide a link to an old thread if relevant.
I'm locking this 3 year old thread now.
db
edit You have earlier been advised not to post in old dead threads.
[http://forums.sun.com/thread.jspa?threadID=354443]
Continuing to ignore this advice will render your account liable to be blocked.
Edited by: Darryl.Burke -
Is there a way for export to create rounded corners?
I love creating layouts with Fireworks, but it always bothered me that it didn't recreate any rounded corners.
When CS6 came out with the CSS Properties window, I was happy to see that the CSS in the Properties window faithfully created my objects with rounded corners, so I had high hopes that the regular export would include this markup... but it didn't.
My current work-around seems very frustrating. I export my file as HTML with CSS images... I get a perfectly rendered page with one exception... the corners are still square. Then, I go back to Fireworks, open the CSS Properties window, then cut and paste the tags for the corners one by one into the CSS file.
It seems to me with such heavy emphasis on CSS integration, that the export function should include the this code too.
Am I doing something wrong? Or is this still an unsupported feature?Use the CSS Properties panel to extract and copy CSS for the selected object on the canvas. It has no integration with the CSS and Images export workflow OR the HTML and Images export workflow (the latter of which produces a rigid, image-based, html table layout). HTML and Images export is really only suitable for clickable prototypes. CSS and Images export is really only suitable if you like re-writing all the CSS to match your normal workflow.
General workflow:
1) Add effects to vector shape (corners, drop shadow, glow, gradient fill, border, opacity, etc..)
2) Open CSS Properties panel. CSS properties for selected object are displayed.
3) Click the Copy All button in the panel.
4) Switch to Dreamweaver or your preferred web editor.
5) Paste the CSS into the desired class, id or element rule.
6) View in Live View or Preview in Browser to see results.
HTH -
Need Help, how to create more than one rectangle from one button in one stage of canvas
Dear Guys,
I has problem to create more than one rectangle canvas from one button. here my role to create :
1. I create input size with textfield
2. I click button called "submit query"
3. My web will create a rectangle with specific size.
My problem come when I click again the button, my old rectangle has been remove than my new rectangle has created.
My question is : how I can create more than one without delete/remove the old I was created?
Here my Code :
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" media="all" href="css/style.css"><script src="kinetic-v4.7.2.min.js"></script></head> <body><label>Length</label><input name="panjang" id="panjang" type="text" size="5" maxlength="5"><br> <label>Width</label><input name="lebar" id="lebar" type="text" size="5" maxlength="5"><br> <label>Height</label><input name="tinggi" id="tinggi" type="text" size="5" maxlength="5"><br> <label>Packing Name</label><input name="nam_pac" id="nam_pac" type="text" size="5" maxlength="5"><br> <input name="submit" type="submit"> <script defer> var stage = new Kinetic.Stage({ container: 'container', width: 943.5, height: 254.10 }); var layer = new Kinetic.Layer(); var rectX = stage.getWidth() / 2 - 50; var rectY = stage.getHeight() / 2 - 50; var group = new Kinetic.Group({ draggable: true }); var box = new Kinetic.Rect({ x: rectX, y: rectY, width: <?php echo ($_POST['panjang']/10)/1.3; ?>, height: <?php echo $_POST['lebar']/10; ?>, //fill: '#00D2FF', stroke: 'blue', strokeWidth: 2 //draggable: true }); var simpleText = new Kinetic.Text({ x: Math.round(box.getWidth() / 2), y: Math.round(box.getHeight() / 2), text: '<?php echo $_POST['tinggi'].'/'.$_POST['nam_pac']; ?>', fontSize: 30, fontFamily: 'Calibri', fill: 'blue', }); // add cursor styling box.on('mouseover', function() { document.body.style.cursor = 'pointer'; }); box.on('mouseout', function() { document.body.style.cursor = 'default'; }); group.add(box); group.add(simpleText); layer.add(group); stage.add(layer); </script></body>
this is my printscreen may help you to help me :
thanks before to help me
Regards,
Prabowo.It's work Ken, but if I modify your code into my code.
error again. they say like before (...is undefined)
May You want to check my code
<?php
include('pinambung.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>GI Loading Plan Maker</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" media="all" href="css/style_2.css">
<script src="js/kinetic-v4.7.2.min.js"></script>
<script src="js/CalendarPopup.js"></script>
<script src="js/jquery-1.10.2.js"></script>
</head>
<body>
<header class="w" id="header"> <!--Header Area -->
<img src="images/headers.jpg" width="100%" height="100%" />
</header><!--End of Header Area -->
<nav class="w" id="nav"><!--nav Area -->
<?php include('top.php'); ?>
</nav><!--End of nav Area -->
<section class="w" id="main"><!--section Area -->
<section id="content">
<article>
<h2>Customer Info</h2>
<form id="myForm" action="insert.php" method="post">
<label>Customer Name :</label><input name="cs_name" id="cs_name" type="text" size="25" maxlength="50">
<br>
<label>Date of Shipment :</label><input name="shipment_date" id="shipment_date" type="text" size="10" maxlength="12" > use format : YYYY-MM-DD
<br />
<label>Container Name :</label><input name="con_num" id="con_num" type="text" size="10" maxlength="12">
<label>Revision :</label><input name="revision" id="revision" type="text" size="5" maxlength="5"><br />
<label>Prepared by :</label><input name="prepared_by" id="prepared_by" type="text" size="25" maxlength="50">
<button id="saveinfo">Save As DB</button>
<button id="saveall">Save As Image</button>
<button id="print" onclick="window.print();return false">Print</button>
</form>
<span id="result"></span>
<script type="text/javascript" src="js/insert.js"></script>
</article>
<br /><br />
<article>
<h2>Packing Info</h2>
<label>Container Type :</label>
40' HC<input name="con_type" type="radio" id="con_type" value="40hc">
40'<input name="con_type" type="radio" id="con_type" value="40">
20<input name="con_type" type="radio" id="con_type" value="20"><br />
<input name="loadstan" type="button" value="Create Container" id="isSelect">
<button id="removecon">Remove Container</button>
<br />
<label>Length</label><input name="panjang" id="panjang" type="text" size="5" maxlength="5">
<label>Width</label><input name="lebar" id="lebar" type="text" size="5" maxlength="5">
<label>Height</label><input name="tinggi" id="tinggi" type="text" size="5" maxlength="5">
<label>Packing Name</label><input name="nam_pac" id="nam_pac" type="text" size="20" maxlength="55">
<input name="loadstan" id="loadstan" type="button" value="Load Standard Packing" onclick="window.open('spk.php', 'winpopup', 'toolbar=no,statusbar=no,menubar=no,resizable=yes,scrollbars=yes,width=300,height=400');">
<input name="submit" type="submit" value="Create Box">
<button id="remove">Remove Box</button><br />
</article>
</section>
<aside id="sidebar">
<label for="layer-to-delate">Select a layer to delete or rotate</label><br />
<select id="layer-to-delete" size="14"></select><br />
<input id="delete-layer-button" type="button" value="Delete layer">
<input id="rotate-layer-button" type="button" value="Rotate box">
</aside>
<section id="content2">
<div id="container">
</div>
<script defer>
function radians (degrees) {return degrees * (Math.PI/180)}
function degrees (radians) {return radians * (180/Math.PI)}
function angle (cx, cy, px, py) {var x = cx - px; var y = cy - py; return Math.atan2 (-y, -x)}
function distance (p1x, p1y, p2x, p2y) {return Math.sqrt (Math.pow ((p2x - p1x), 2) + Math.pow ((p2y - p1y), 2))}
var stage = new Kinetic.Stage({
container: 'container',
width: 943.5,
height: 254.10
var layers = new Array();
function addCont(){
layer2 = new Kinetic.Layer();
switch ($('input:radio[name=con_type]:checked').val()){
case '40hc':
var box_con = new Kinetic.Rect({
x: 10,
y: 10,
width: 1190/1.3,
height: 2300/10,
stroke: 'black',
strokeWidth: 2
var TextCon = new Kinetic.Text({
x: 10,
y: 240,
text: 'Container Size 40 HC (11900mm X 2300mm X 2550mm)',
fontSize: 12,
fontFamily: 'Calibri',
fill: 'green',
layer2.add(box_con);
layer2.add(TextCon);
stage.add(layer2);
break;
case '40':
var box_con = new Kinetic.Rect({
x: 10,
y: 10,
width: 1190/1.3,
height: 2300/10,
stroke: 'black',
strokeWidth: 2
var TextCon = new Kinetic.Text({
x: 10,
y: 240,
text: 'Container Size 40 (11900mm X 2300mm X 2250mm)',
fontSize: 12,
fontFamily: 'Calibri',
fill: 'green',
layer2.add(box_con);
layer2.add(TextCon);
stage.add(layer2);
break;
case '20':
var box_con = new Kinetic.Rect({
x: 10,
y: 10,
width: 580/1.3,
height: 2300/10,
stroke: 'black',
strokeWidth: 2
var TextCon = new Kinetic.Text({
x: 10,
y: 240,
text: 'Container Size 20 (5800mm X 2300mm X 2250 mm)',
fontSize: 12,
fontFamily: 'Calibri',
fill: 'green',
layer2.add(box_con);
layer2.add(TextCon);
stage.add(layer2);
break;
function addRect() {
layer = new Kinetic.Layer();
var box = new Kinetic.Rect({
x: 10,
y: 10,
width: +(($("#panjang").val()/10)/1.3),
height: +($("#lebar").val()/10),
stroke: 'blue',
strokeWidth: 2
var group = new Kinetic.Group({
draggable: true,
snap : true
var boxLabel = $("#nam_pac").val() + "/H : " + $("#tinggi").val();
if (($("#panjang").val() && $("#lebar").val()) != 0) {
var simpleText = new Kinetic.Text({
x: 10,
y: 10,
text: boxLabel,
fontSize: 12,
fontFamily: 'Calibri',
fill: 'red',
} else {
var simpleText = new Kinetic.Text({
x: 10,
y: 10,
text: '',
fontSize: 12,
fontFamily: 'Calibri',
fill: 'red',
group.add(box);
group.add(simpleText);
layer.add(group);
stage.add(layer);
layers.push(layer);
$("#layer-to-delete").append("<option>Layer " + boxLabel + "</option>");
function deleteRect() {
if($("#layer-to-delete > option").length < 1) return;
var i = $("#layer-to-delete").prop("selectedIndex");
layers.splice(i,1)[0].destroy();
$("#layer-to-delete > option").eq(i).remove();
function rotateRect() {
if($("#layer-to-delete > option").length < 1) return;
var i = $("#layer-to-delete").prop("selectedIndex");
layers[i].rotateDeg(30);
layers[i].draw();
$("#delete-layer-button").click(function(e) {
deleteRect();
$("#rotate-layer-button").click(function(e) {
rotateRect();
$("input[type=submit]").click(function(e) {
addRect();
$("#isSelect").click(function () {
addCont();
$("#removecon").click(function () {
layer2.destroy();
$(window).keypress(function(e) {
if(!$(document.activeElement).is("label")) {
if((e.keyCode || e.which) == 46) {
layer.destroy();
if((e.keyCode || e.which) == 35) {
layer2.destroy();
document.getElementById('saveall').addEventListener('click', function() {
stage.toDataURL({
callback: function(dataUrl) {
window.open(dataUrl);
}, false);
</script>
</section>
</section><!--End of section Area -->
<footer class="w" id="footer"><!--footer Area -->
Copyright <a href="login.php" target="_new">©</a> 2013, <a href="http://omhanggar.com" target="_new">created</a><a href="http://intranet.guentner-asia.com" target="_new"> by PT. Güntner Indonesia </a>
</footer><!--End of footer Area -->
</body>
</html>
thanks again before,
Prabowo -
Smart Objects...changing canvas size problem
When changing the canvas size of a smart object, the layer on the original document will distort visually since it doesn't update the size of the smart object.
Is there a solution to this, or an easy way to quickly update every instance of the smart object on the original doc?
To clarify: I know that you can change the dimensions of the smart object on the original doc and it'll fix it, my question is if there's a way to automatically have that happen and have the original doc smart objects respect your canvas size changes on the smart object doc.
Reproduce:
1) Draw a circle
2) Turn it into a smart object
3) Go into the smart object, change the canvas size by increasing the height of the canvas. The smart object should now have a circle with blank space above/below it.
4) Save the smart object
5) The circle on the original document will now be squished.
I'm using Photoshop CS5xg3 wrote:
When changing the canvas size of a smart object, the layer on the original document will distort visually since it doesn't update the size of the smart object.
When you change the canvas size of a document the only layer that will change is a backgroung layer for it does not support transparency so its pixels will be changed. However a background layer should not distort it may be cropped and have canvas added in which case the color of the empty canvas can be set in the canvas size dialog. All other layer including Smart Object layer should not chang at all. Layer positioning in relationship to the canvas and the new canvas size is set during the canvas size change. Layers can be any size and have any aspect ratio. Their sizes can be smaller, the same or larger then the canvas size. Even layer that can fit within a documents canvas size may be positioned so that all, some or none of the layer is over the documents canvas.
I do not know what you mean when you write the original document chages. A smart object layer has an embedded copy of an object. The original document is not touched. You can open the smart object layer embedded object in Photoshop by double clicking on the smart object icon in the layers palette smart object layer and change it size. And distort it f you wish. When you use Photoshop save. Photoshop will change the enbedded object in the smart object layer. You can also leave the embedded smaro object as is and change the smart object layer size and distort it using transform on the smart object layer itsself.
I think what you did was to open the smart object in photoshop change its canvas saze then save it. The updated smart object is realy round but you dont see that it is becaue it is being transformec ti fit the original documents canvas. If you do a Canvas size on the codument you will see the original docyment canvas size is not change and thet your now squaching a now changed taller object into a shorter canvas. With each Smart Obkect layer there is as associated transform.
No I was wrong I just tried that and it looks like the transform was not the problem as yo can see I dir a Ctrl+T so you can see the size of the smart object layer is now biger then the original document and is positioned centered canvas is still 300x300 white area in image -
Making a photo with rounded corners
I just followed both of these instructions to create rounded
corners on a rectangular image:
http://www.enghiong.com/how-to-make-rounded-corner-edges-using-fireworks.html/
http://www.joycejevans.com/tutorials/Fireworks/FWMX/roundecorners/rc_crn.htm
What am I missing? Both of them show the transparent canvas?
I drew the rectangle, rounded the corners, pasted inside and all
the other steps and saved it. When I use in my html file, the
background shows!
Any help with this is so appreciated.quality11 wrote:
> Sure. Here's the orginal:
>
http://www.charlotteswebservices.com/images/ChildhoodPic.jpg
>
> And some that I've tried to make rounded corners:
>
http://www.charlotteswebservices.com/images/childhood-round-opt.jpg
>
http://www.charlotteswebservices.com/images/childhood-round.png
Here you go. It's usually a good idea to use a white rather
than black
object to paste inside of.
http://www.playingwithfire.com/childhood.html
Linda Rathgeber - Adobe Community Expert
http://www.adobe.com/communities/experts/members/8.html -
Making a picture look like a canvas print
Hi
I run an online canvas print company and sometimes for new images we have available I want to create a photoshopped example of how it would look as a canvas print, rather than getting it actually printed and photographing it. I can do this manually but it takes ages so I wondered if there is an easier way, perhaps an action or some kind of plugin that can do it a lot quicker?
This page shows some examples of what I have done in photoshop http://www.fotoviva.co.uk/photos-on-canvas.asp
The best one is the Gallery Wrapped Canvas at the bottom, which shows the image wrapping around the frame - it looks quite real. Ideally it would be useful to be able to create them with and without the wrap to show customers the options they can have.
I tried to create a Photoshop action but the trouble is not all of the images we sell are the same size ratio ie. some are rectangular, some square and some panoramic in shape.
So is there an easy way to create these in Photoshop? I guess it's like making a 2D image into a 3D box in effect.
ThanksThe major 3D packages are overkill for this (in expense, and time to setup/render).
There is alot of software for this on the pc
This one actually has a mac version
http://www.boxshot3d.com/
In your search I would look for one that lets you wrap 1 bitmap image against the front and 4 sides of an extruded rectangle, to save you the time of making separate images for side panels(and you likely have slightly rounded edges on your canvas). I would try the boxshot3d as they appear to have a free trial. -
Nested canvas in GridLayout can't get its width and height
Hello,
I have a class entitled DisplayCanvas, which will accept some parameters from an invocation in another class including a shape and message parameters. These parameters must be centered in the instance of DisplayCanvas.
For some reason, when I use this.getWidth() and this.getHeight() within my DisplayCanvas class, I get 0 and 0! I need the width and height in order to center the parameters the user will enter.
Why does the width and height result at 0? What can I do to get the width and height?
In my DisplayCanvas class notice the lines:
canWidth = this.getWidth();
canHeight = this.getHeight();
For some reason the result is 0 for each!
Here is my code for the DisplayCanvas class:
//import the necessary clases
import java.awt.*;
import java.applet.*;
import javax.swing.*;
//begin the DisplayCanvas
public class DisplayCanvas extends Canvas
//declare private data members to house the width and height of the canvas
private int canWidth;
private int canHeight;
//declare private data members for the shape and message
private String message;
private String shape;
private Color sColor;
private int sWidth;
private int sHeight;
private String font;
private Color ftColor;
private int ftSize;
//declare public data members
//constructor of DisplayCanvas
public DisplayCanvas()
//set the width and height
canWidth = this.getWidth();
canHeight = this.getHeight();
//set all data members to defaults
message = "";
shape = "";
sColor = null;
sWidth = 0;
sHeight = 0;
font = "";
ftColor = null;
ftSize = 0;
} //end the constructor
//begin the setParams function
public void setParams(String m, String s, Color c, int w, int h,
String f, Color ftC, int ftS)
//set all private data members of DisplayShape to the arguments
//this function assumes error checking was done by DemoShape
message = m;
shape = s;
sColor = c;
sWidth = w;
sHeight = h;
font = f;
ftColor = ftC;
ftSize = ftS;
} //end the setParams function
//begin the public paint function of ShowShape
public void paint(Graphics g)
//set and output the shape according to the arguments
//determine the x and y of the shape
int x = (canWidth - sWidth) / 2;
int y = (canHeight - sHeight) / 2;
//set the color for the graphic object
g.setColor(sColor);
//output the shape
g.drawRect(x, y, sWidth, sHeight);
//set and output the message according to the arguments
//set the color and the font for the graphic object
g.setColor(ftColor);
g.setFont(new Font(font, Font.PLAIN, ftSize));
//determine the centering of the message
//output the message with the settings
g.drawString(canWidth + " " + canHeight, 10, 10);
} //end the paint function of ShowShape class
} //end the DisplayCanvas classHere is my form entry class using the nested DisplayCanvas instance entitled drawCanvas:
//import the necessary java packages
import java.awt.*; //for the awt widgets
import javax.swing.*; //for the swing widgets
import java.awt.event.*; //for the event handler interfaces
//no import is needed for the DisplayCanvas class
//if in the same directory as the DemoShape class
public class DemoShape extends JApplet
//declare private data members of the DemoShape class
//declare the entry and display panel containers
private Container entire; //houses entryPanel and displayCanvas
private JPanel entryPanel; //accepts the user entries into widgets
private DisplayCanvas drawCanvas; //displays the response of entries
//required control buttons for the entryPanel
private JTextField xShapeText, yShapeText, messageText, fontSizeText;
private ButtonGroup shapeRadio;
private JRadioButton rect, oval, roundRect;
private JComboBox shapeColorDrop, fontTypeDrop, fontColorDrop;
//declare public data members of the DemoShape class
//init method to initialize the applet objects
public void init()
//arrays of string to be used later in combo boxes
//some are used more than once
String fonts[] = {"Dialog", "Dialog Input", "Monospaced",
"Serif", "Sans Serif"};
String shapes[] = {"Rectangle", "Round Rectangle", "Oval"};
String colors[] = {"Black", "Blue", "Cyan", "Dark Gray",
"Gray", "Green", "Light Gray", "Magenta", "Orange",
"Pink", "Red", "White", "Yellow"};
//declare variables to assist with the layout
//these are the left and right justified x coordinates
int ljX = 10; int rjX = 150;
//this is the y coordinates for the rows
int yRow1 = 10; //the shape rows
int yRow2 = 40;
int yRow3 = 60;
int yRow4 = 130;
int yRow5 = 150;
int yRow6 = 210; //the message rows
int yRow7 = 240;
int yRow8 = 260;
int yRow9 = 300;
int yRow10 = 320;
int yRow11 = 360;
int yRow12 = 380;
//these are the widths for the text boxes, drop downs
//message entry, big message entry and radio buttons
int tWidth = 30; int dWidth = 100;
int mWidth = 250; int bmWidth = 250;
int rWidth = 125;
//the height is universal, even for the messages!
int height = 25;
//set a content pane for the entire applet
//set the size of the entire window and show the entire applet
entire = this.getContentPane();
entire.setLayout(new GridLayout(1, 2));
//create the entry panel and add it to the entire pane
entryPanel = new JPanel();
entryPanel.setLayout(null);
entire.add(entryPanel);
//create the display canvas and add it to the entire pane
//this will display the output
drawCanvas = new DisplayCanvas();
entire.add(drawCanvas);
//entry panel code
//add the form elements in the form of rows
//the first row (label)
JLabel entryLabel = new JLabel("Enter Shape Parameters:");
entryPanel.add(entryLabel);
entryLabel.setBounds(ljX, yRow1, bmWidth, height);
//second row (labels)
JLabel shapeTypeLabel = new JLabel("Select Shape:");
shapeTypeLabel.setBounds(ljX, yRow2, mWidth, height);
entryPanel.add(shapeTypeLabel);
JLabel shapeColorLabel = new JLabel("Select Shape Color:");
shapeColorLabel.setBounds(rjX, yRow2, mWidth, height);
entryPanel.add(shapeColorLabel);
//third row (entry)
rect = new JRadioButton("Rectangle", true);
oval = new JRadioButton("Oval", false);
roundRect = new JRadioButton("Round Rectangle", false);
rect.setBounds(ljX, yRow3, rWidth, height);
oval.setBounds(ljX, yRow3 + 20, rWidth, height);
roundRect.setBounds(ljX, yRow3 + 40, rWidth, height);
shapeRadio = new ButtonGroup();
shapeRadio.add(rect);
shapeRadio.add(oval);
shapeRadio.add(roundRect);
entryPanel.add(rect);
entryPanel.add(oval);
entryPanel.add(roundRect);
shapeColorDrop = new JComboBox(colors);
shapeColorDrop.setBounds(rjX, yRow3, dWidth, height);
shapeColorDrop.addFocusListener(new focusListen());
entryPanel.add(shapeColorDrop);
//the fourth row (labels)
JLabel xShapeLabel = new JLabel("Enter Width:");
xShapeLabel.setBounds(ljX, yRow4, mWidth, height);
entryPanel.add(xShapeLabel);
JLabel yShapeLabel = new JLabel("Enter Height:");
yShapeLabel.setBounds(rjX, yRow4, mWidth, height);
entryPanel.add(yShapeLabel);
//the fifth row (entry)
xShapeText = new JTextField("200", 3);
xShapeText.setBounds(ljX, yRow5, tWidth, height);
xShapeText.addFocusListener(new focusListen());
entryPanel.add(xShapeText);
yShapeText = new JTextField("200", 3);
yShapeText.setBounds(rjX, yRow5, tWidth, height);
yShapeText.addFocusListener(new focusListen());
entryPanel.add(yShapeText);
//the sixth row (label)
JLabel messageLabel = new JLabel("Enter Message Parameters:");
messageLabel.setBounds(ljX, yRow6, bmWidth, height);
entryPanel.add(messageLabel);
//the seventh row (labels)
JLabel messageEntryLabel= new JLabel("Enter Message:");
messageEntryLabel.setBounds(ljX, yRow7, mWidth, height);
entryPanel.add(messageEntryLabel);
//the eighth row (entry)
messageText = new JTextField("Enter your message here.");
messageText.setBounds(ljX, yRow8, mWidth, height);
messageText.addFocusListener(new focusListen());
entryPanel.add(messageText);
//the ninth row (label)
JLabel fontTypeLabel = new JLabel("Select Font:");
fontTypeLabel.setBounds(ljX, yRow9, mWidth, height);
entryPanel.add(fontTypeLabel);
JLabel fontColorLabel = new JLabel("Select Font Color:");
fontColorLabel.setBounds(rjX, yRow9, mWidth, height);
entryPanel.add(fontColorLabel);
//the tenth row (entry)
fontTypeDrop = new JComboBox(fonts);
fontTypeDrop.setBounds(ljX, yRow10, dWidth, height);
fontTypeDrop.addFocusListener(new focusListen());
entryPanel.add(fontTypeDrop);
fontColorDrop = new JComboBox(colors);
fontColorDrop.setBounds(rjX, yRow10, dWidth, height);
fontColorDrop.addFocusListener(new focusListen());
entryPanel.add(fontColorDrop);
//the eleventh row (label)
JLabel fontSizeLabel = new JLabel("Select Font Size:");
fontSizeLabel.setBounds(ljX, yRow11, mWidth, height);
entryPanel.add(fontSizeLabel);
//the final row (entry)
fontSizeText = new JTextField("12", 2);
fontSizeText.setBounds(ljX, yRow12, tWidth, height);
fontSizeText.addFocusListener(new focusListen());
entryPanel.add(fontSizeText);
//display panel code
//use test parameters
//these will later be retrieved from the entries
drawCanvas.setParams("Hello", "roundRect", Color.red,
100, 100, "Serif", Color.black, 12);
//set the applet to visible
//set to visible and display
entire.setSize(800, 600);
entire.setVisible(true);
} //end the init method
//declare an inner class to handle events
private class focusListen implements FocusListener
//supply the implementation of the actionPerformed method
//pass an event variable as the argument
public void focusLost(FocusEvent e)
{ JOptionPane.showMessageDialog(null, "Focus lost."); }
//declare an empty focus gained function
public void focusGained(FocusEvent e) {}
} //end testListen class
} //end DemoShape classSorry for glossing over your code sample, particularly as it looks like one of the best I've seen so far on the forums, but I'm pretty sure the answer you are looking for is as follows:
Java doesn't render a component until paint() is called so until then you are not going to have any size settings because the jvm simply doesn't know how big the visual component is. This makes sense when you think about what the jvm is doing. The layout manager controls the display of the components depending on the settings it is supplied. So until it knows how many components you want, where, what kind of spacing, etc, etc, etc, how can the size be determined.
The true cycle of events is therefore:
create an instance of DisplayCanvas,
add it to your container,
make the container visible (which renders the component),
get the size of the DisplayCanvas instance.
You are being hampered because your desired chain of events is:
create an instance of DisplayCanvas,
get the size of the DisplayCanvas instance,
add it to your container,
make the container visible.
This state of affairs is highly annoying and then leads to the next question "what do we do about that?". There is a cunning trick which is to get the jvm to render the component to an off-screen image, thus calculating the dimensions of the component so that you can do precisely the kind of enquiry on the object that you have been looking for. It should be noted that this may not be the visual size for all the reasons given above, but it is the "preferred size" for the component. Check the Swing tutorials and have a look at the section on Layout Managers for a run down on what that means.
Anyway, we can use this handy code sample to determine the preferred size for your component. Notice the call to "paint()" (normally you would never make a direct call to paint() in swing) and the "g.dispose()" to free resources:
package com.coda.swing.desktool.gui;
import java.awt.Component;
import java.awt.Dimension;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
public class PaintUtil
public PaintUtil()
super();
public static Component paintBuffer(Component comp)
Dimension size = comp.getPreferredSize();
comp.setSize(size);
BufferedImage img = new BufferedImage(size.width, size.height, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2 = img.createGraphics();
comp.paint(g2);
g2.dispose();
return comp;
}Before you make a call to getWidth() or getHeight() put in a call to "PaintUtil.paintBuffer(this);" and see what happens.
By the way, I can't claim credit for this code ... and I really wish I could remember where I got it from myself so I can thank them :) -
hey, i have a canvas that positions itself in the middle of the screen with two lines (x and y axis). the problem is that i want to be able to move the origin, which then draws the axis again.
thanks
Pedge
// GCanvas.java
import java.awt.*;
import java.awt.event.*;
import java.util.*;
* This class extends the canvas class to include the input and drawing of a polygon
* @author Geoff Hobson
* @version 1.1 (24 Nov 99)
class GCanvas extends Canvas
* the polygon object associated with this canvas.
private GPolygon polygon;
* indicates whether currently in process of colecting the vertices of a polygon.
private boolean building = false;
* the size of one pixel in the logical coordinates of the polygon - the scaling factor.
float pixelSize;
* the screen x coordinate of the logical origin - screen x position of y-axis.
int centerX;
* the screen y coordinate of the logical origin - screen y position of x-axis.
int centerY;
* the radius of the circle around the start point,
* a mouse press anywhere in this circle will be treated as selecting the centre point.
private int circleSize = 3;
* Constructs a GCanvas and associates it with the given Polygon poly.
* @param poly the polygon object which is to be drawn and manipulated
GCanvas(GPolygon poly)
polygon = poly;
addMouseListener
(new MouseAdapter()
{ public void mousePressed(MouseEvent evt)
pointSelected(evt.getX(), evt.getY());
); // end of new MouseAdapter
setBackground(Color.gray);
private int cX, cY;
* clears the canvas and sets it ready for the input of a new polygon.
public void newPoly()
building = true;
setCursor(Cursor.getPredefinedCursor(Cursor.CROSSHAIR_CURSOR));
repaint();
* The action to be performed when a point is selected by a mouse press.
* @param x the x coordinate of the selected point
* @param y the y coordinate of the selected point
private void pointSelected(int x, int y)
if (building)
addVertex(x, y);
* Add a new vertex to the polygon object
* @param x the x coordinate of the new vertex
* @param y the y coordinate of the new vertex
private void addVertex(int x, int y)
if (polygon.size() == 0)
polygon.addVertex(new Point2D(fX(x), fY(y))); // add first vertex to a polygon
else
Point2D v0 = polygon.getVertex(0);
int dx = x - iX(v0.x), dy = y - iY(v0.y);
if (dx * dx + dy * dy < circleSize * circleSize)
{ // mouse in circle around first vertex
polygon.closePolygon(); // the polygon has been closed
building = false;
setCursor(Cursor.getPredefinedCursor(Cursor.DEFAULT_CURSOR));
else
polygon.addVertex(new Point2D(fX(x), fY(y))); // add an other vertex to polygon
repaint();
* Converts logical to screen x coordinate
* @param x the logical x coordinate
* @return the screen x coordinate
int iX(float x)
return Math.round(centerX + x/pixelSize);
* Converts logical to screen y coordinate
* @param x the logical y coordinate
* @return the screen y coordinate
int iY(float y)
return Math.round(centerY - y/pixelSize);
* Converts screen to logical x coordinate
* @param x the screen x coordinate
* @return the logical x coordinate
float fX(int x)
return (x - centerX) * pixelSize;
* Converts screen to logical y coordinate
* @param x the screen y coordinate
* @return the logical y coordinate
float fY(int y)
return (centerY - y) * pixelSize;
* Paints the canvas with current state of polygon
* @param g the graphic context for the paint method
public void paint(Graphics g)
// initialise a blank canvas and draw axes etc
int maxX = getSize().width - 1; // get size of screen
int maxY = getSize().height - 1;
float rWidth = polygon.logicalWidth(); // get logical size of polygon
float rHeight = polygon.logicalHeight();
pixelSize = Math.max(rWidth/maxX, rHeight/maxY); // calculate scaling factor
centerX = maxX/2; // calculate position of axes
centerY = maxY/2;
int left = iX(-rWidth/2); // calculate edges of logical polygon
int right = iX(rWidth/2);
int bottom = iY(-rHeight/2);
int top = iY(rHeight/2);
// draw white rectangle for logical polygon
g.setColor(Color.white);
g.fillRect(left, top, right - left+1, bottom - top+1);
// draw frame around logical polygon rectangle
g.setColor(Color.darkGray);
g.drawRect(left, top, right - left, bottom - top);
g.setColor(Color.lightGray);
g.drawLine(left,centerY, right,centerY); // draw x axis
g.drawLine(centerX,top, centerX,bottom); // draw y-axis
// draw current state of the polygon
int n = polygon.size();
if (n == 0) return; // if there are no vertices
Point2D A, B;
A = (polygon.getVertex(0));
// Show tiny circle around first vertex:
g.setColor(Color.red);
if (!polygon.isClosed())
g.drawOval(iX(A.x)-circleSize, iY(A.y)-circleSize, circleSize*2, circleSize*2);
// draw the polygon
g.setColor(Color.blue);
for (int i=1; i<n; i++)
B = (polygon.getVertex(i));
g.drawLine(iX(A.x), iY(A.y), iX(B.x), iY(B.y));
A = B;
if (polygon.isClosed()) // draw side from last to first vertex
B = (polygon.getVertex(0));
g.drawLine(iX(A.x), iY(A.y), iX(B.x), iY(B.y));
} // end of paint
} // end of class GCanvasHow about declaring changing centerx and centery in the constructor?
-
Hello everybody
I am not good at graphics and canvas. Who can help me how to draw graphics and use canvases to draw images ?
I have created a program to draw a round rectangle but it does not work very well : the graphics remains at its last position when I want it to be displayed at a different location. I want a great help. Here is the code :
package pack_graphics;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import oracle.jdeveloper.layout.*;
* A Swing-based top level window class.
* <P>
* @author xxxx
public class FGraphics extends JFrame {
BorderLayout borderLayout1 = new BorderLayout();
JPanel jPanel1 = new JPanel();
XYLayout xYLayout1 = new XYLayout();
Timer timer;
int x=10;
int y=23;
* Constructs a new instance.
public FGraphics() {
super();
try {
jbInit();
catch (Exception e) {
e.printStackTrace();
* Initializes the state of this instance.
private void jbInit() throws Exception {
this.getContentPane().setLayout(borderLayout1);
this.setSize(new Dimension(200, 100));
jPanel1.setLayout(xYLayout1);
this.setTitle("Test graphics");
this.getContentPane().add(jPanel1, BorderLayout.CENTER);
timer = new Timer(200, new ActionListener()
public void actionPerformed(ActionEvent evt)
try
after_timer_expired(evt);
catch(Exception ex)
return;
timer.start();
public void after_timer_expired(ActionEvent evt)
x += 5;
repaint();
public void paint(Graphics g)
g.drawRoundRect(x,y,50,20,25,15);
Thank you very much indeed.I 'simplified' your code a bit, the results follow ... it seems to work fine. If this is not what you need, please clarify
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class FGraphics extends JFrame {
boolean boo;
int x,
y;
BorderLayout borderLayout;
JPanel jPanel;
FlowLayout flowLayout;
Container container;
Timer timer;
Color color;
public FGraphics() {
super("Test graphics");
boo = true;
x = 10;
y = 23;
container = getContentPane();
color = getBackground();
borderLayout = new BorderLayout();
jPanel = new JPanel();
flowLayout = new FlowLayout();
container.setLayout(borderLayout);
jPanel.setLayout(flowLayout);
container.add(jPanel, BorderLayout.CENTER);
timer = new Timer(200, new ActionListener() {
public void actionPerformed(ActionEvent evt) {
try {
afterTimerExpired(evt);
catch(Exception ex) {
ex.printStackTrace();
timer.start();
setSize(200,100);
setDefaultCloseOperation( EXIT_ON_CLOSE );
setVisible( true );
public void afterTimerExpired(ActionEvent evt) {
x += 5;
repaint();
public void paint(Graphics g) {
g.setColor( color );
g.fillRect(0,0,(int)getSize().getWidth(),(int)getSize().getHeight());
g.setColor( Color.black );
g.drawRoundRect(x,y,50,20,25,15);
public static void main( String[] argv ) {
new FGraphics();
} -
Changing prompt colour in oracle forms 6i to canvas background (solution)
One of the really infuriating things about Oracle Forms 6i (and possibly other versions) is that when you set a visual attribute for a item the prompt, as well ad field, takes that background colour. Seing it is common to have the field background white and the canvas background gray this is a paid. The following procedure sets the background colour for all prompts to the background colour of the canvas the prompts field sites on - i.e. it automaticaly sorts out the problem.
PROCEDURE lp_setup_prompt_colour IS
-- This procedure sets the background colour of all prompts to the
-- items canvas background colour
this_block varchar2(70) :=
get_form_property (name_in ('SYSTEM.CURRENT_FORM'), first_block);
last_blockname constant varchar2 (70) := -- Initialise current block to first block
get_form_property (name_in ('SYSTEM.CURRENT_FORM'), last_block); -- Define the last block
field_name varchar2(70); -- the name of the current item
this_item varchar2(70) := -- Initialise current item to the first item in the form
get_block_property (this_block, first_item);
last_field varchar2 (70) := -- Initialise last item to the last item in the first block
get_block_property (this_block, last_item);
canvas varchar2(70);
begin
loop -- Go through every item in the form
field_name := this_block || '.' || this_item; -- set the current item
canvas := get_item_property( field_name, ITEM_CANVAS );
if canvas is not null then -- don't bother if null canvas item
SET_ITEM_PROPERTY(field_name, PROMPT_BACKGROUND_COLOR,
GET_CANVAS_PROPERTY(canvas ,BACKGROUND_COLOR));
end if;
-- Stop looping once the last item in the form has been added to the list
exit when this_block = last_blockname and this_item = last_field;
if this_item = last_field then -- weve looped round and are back at first field
-- Step into the next block
this_block := get_block_property (this_block, nextblock);
this_item := get_block_property (this_block, first_item);
last_field := get_block_property (this_block, last_item);
else
-- Step to the next item in the block
this_item := get_item_property (field_name, nextitem);
end if;
end loop;
end;
also posted at http://www.gurtlush.org.uk/article.php?story=20040422141050964Actually, this is a known bug - you should apply the latest patch.
Regards
Grant -
Cropping round corners on my icon
This is related to helping me with a previous post. If I can complete this step I'm home and hosed.
I have made an icon for a webpage and I just watched a tutorial on saving for the web. I made this icon with the rounded corner rectangle tool. I have some masked objects in this icon so there are invisible parts hanging out from the visible artwork, so It seems I can't slice because so far from what I have learned slicing doesn't do round corners and also, I can't use the normal crop tool. If I do, I'm going to have white square corner residue in my file.
I just read a Fireworks forum thread which shows how to crop round corners that talks about masking and then, to crop the visible part only use, Modify > Canvas > Trim Canvas, but I haven't got that option in Illustrator it seems.
Does anyone know how to do this in Illustrator?It's ok. I solved my problem by simply exporting to Photoshop and the artboard turned transparent.
Thanks
Maybe you are looking for
-
Hi ! I have a message on my Z10 that the new update OS 10.2.0.424 is available, I have no wifi networks around me. So I want to do the update via BB Link but this one doesn't find the new update. Why this new update doesn't appear on BB Link ? Thanks
-
Mapping of Plant to Cost Center
Is there any direct mapping of plant to the cost center? If so, pls. provide the transaction code through which we can check the same. Also provide the table, if any.
-
Chart color palette , where can I change it?
Hi I would like to change the colors on the charts, in other tools there are usually color palette for this kind of issues. Where can I find OBIEEs chart color palette ? Kind Regards
-
PHOTOSHOP CC :: Can't close files without saving them
The [x] button is not active - have to save all "trash" to close the file...
-
...is located here: Kevin Tieskoetter, "Lightroom 2.0 will not export to Photoshop CS3" #228, 13 Aug 2008 2:59 pm