Szeretnék böngészőben egy olyan felületet csinálni, ahol egyszerű pixelképet lehessen csinálni pl 8x8 pixelből, egy pixel vagy fekete vagy fehér lehet.
Sajnos sehol nem találtam egyszerü dolgot erre, igazából a pixel kirajzolással vennek gondjaim, a klikkelés, tömb feltöltés, post-olás nem gond.
Nem tudok valahogy képet csin, ami változik.
Ebben kérem segítségeteket.
- 1349 megtekintés
Hozzászólások
Hát, hirtelen ötlet, akár működhet is:
<div>
<span id="a1"><span id="a2"><span id="a3">...<span id="a8">
<span id="b1"><span id="b2"><span id="b3">...<span id="b8">
.
.
.
</div>
style.css
---------
span
{
height:1px;
width:1px;
}
Majd
document.getElementById['a1'].style.color=szin;
Hajrá!
--
Debian - The "What?!" starts not!
http://nyizsa.uni.cc
- A hozzászóláshoz be kell jelentkezni
<html>
<head>
<style>
.geza {
position: absolute;
height: 20px;
width: 20px;
}
</style>
<script>
function paint(){
colorize('a1','red',10,10);
colorize('a2','yellow',10,30);
colorize('b1','green',30,10);
colorize('b2','blue',30,30);
}
function colorize(id,color,x,y){
if(document.getElementById || document.all){
obj=document.getElementById(id);
}
// ie6
if(document.layers){
obj=document.layers[id];
}
obj.style.backgroundColor=color;
obj.style.top=x;
obj.style.left=y;
}
</script>
</head>
<body onload=paint();>
<div class=geza id=a1> </div><div class=geza id=a2> </div>
<div class=geza id=b1> </div><div class=geza id=b2> </div>
</body>
</html>
értelem szerűen fogod és a style-nál átírod 1x1 pixelre, és ehhez képest ugye átírod az x és y koordinátákat is. Persze ha szépen akarod csinálni, akkor inkább bevezetsz egy változót, ami megmondja milyen széles és magas legyen a cella, majd a paint függvényben a mátrix cella indexeit használod (pl. 1,1 meg 1,2 meg 2,1 és 2,2), aztán a colorize függvényben *side-olod a top és a left értékeket. Természetesen parseInt-elni kell őket.
éretelem szerűen a style width és height értéke lesz a side értéke.
...
<script>
var side=20;
...
function paint(){
colorize('a1','red',1,1);
colorize('a2','yellow',1,2);
...
obj.style.top=parseInt(x*side);
obj.style.left=parseInt(y*side);
...
- A hozzászóláshoz be kell jelentkezni
Ezeknek mi koze Java-hoz?
_________________________________________________________________________
"ONE OF THESE DAYS I'M GOING TO CUT YOU INTO LITTLE PIECES!!!$E$%#$#%^*^"
- A hozzászóláshoz be kell jelentkezni
Jogos, nem láttam a topic helyét. Csak elkezdtem olvasni, hogy "szeretnék böngészőben...".
--
Debian - The "What?!" starts not!
http://nyizsa.uni.cc
- A hozzászóláshoz be kell jelentkezni
Van ilyen object, hogy canvas, de ez IE-ben asszem nem megy.
<html>
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var imd = ctx.getImageData(0,0,8,8);
imd.data[0]=127;
imd.data[1]=127;
imd.data[2]=127;
imd.data[3]=255;
ctx.putImageData(imd,0,0);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="8" height="8"></canvas>
</body>
</html>- A hozzászóláshoz be kell jelentkezni
JButton-okkal.nem tudom,mennyire szabályos megoldás,eléggé kezdő vagyok.
import java.awt.event.*; //az actionlisetener-hez
import java.awt.Color;//a színekhez
import javax.swing.*;
class the_8x8_color_switch extends JPanel
{
public the_8x8_color_switch()
{
super();
this.setSize(800,600);
int i=0,j=0;
JButton[][] buttons;
buttons=new JButton[8][8];
for (i=0;i<8;i++)
{
for (j=0;j<8;j++)
{
buttons[i][j]=new JButton();
buttons[i][j].setBounds((i+1)*10,(j+1)*10,10,10);//első kettő a pozíció,második kettő a méret
buttons[i][j].setBackground(Color.WHITE);
buttons[i][j].addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent e)
{
JButton hivo=((JButton)e.getSource());
if (hivo.getBackground()==Color.WHITE) hivo.setBackground(Color.BLACK);
else
if (hivo.getBackground()==Color.BLACK) hivo.setBackground(Color.WHITE);
}
}
);
this.add(buttons[i][j]);
}
}
this.setLayout(null);
}
static public void main (String[] arg)
{
the_8x8_color_switch pelda=new the_8x8_color_switch();
JFrame ablak=new JFrame();
ablak.setSize(800,600);
ablak.setLayout(null);//ez miatt nem lesznek a gombok szétterülősek
ablak.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//ettől csukódik be az ablak,ha az "x"-re kattintasz.
ablak.add(pelda);
ablak.setVisible(true);
}
}
- A hozzászóláshoz be kell jelentkezni