简短的绘图程序


13

您刚刚邀请了文科专业到您家,您正在告诉他/她

“你知道,我是一个很棒的程序员,我可以做x和y和z ...”

他/他很快就感到无聊,并问您:

“如果您真的是一个伟大的程序员,可以编写一个程序让我画图,我只需要使用鼠标在屏幕上画线,并以任何方式选择不同的颜色即可。”

您的代码可能会导入标准库。您的代码可能要求通过键盘选择颜色。

这是;最短的代码胜出。

项目符号要点

  • 通过在按住鼠标左键的同时四处移动鼠标来绘制线条。

  • 不需要布雷森汉姆的直线算法,任何内置算法都可以解决问题

  • 如果用户可以通过任何方式更改线的粗细,则可以获得* 0.8的奖励,但这不是强制性的。

  • 我想自己实现线条画应该更好,但是如果您愿意,可以导入一个库,只需在代码描述中说明即可。

  • 最小值为5种不同的颜色(红色,绿色,蓝色,白色,黑色)。如果您随机更改它们,则会得到* 1.2的罚款。您可以根据需要进行更改(按钮和按键都可以)。

  • 最好将它们按在点或徒手画之间进行鼠标绘制(即,就像您在绘画中所做的那样),并为您提供* 0.7的奖励,但任何其他方法都可以:(例如)单击两个点并在这些点之间绘制一条线?

  • 绘图画布必须为600x400

  • 更改颜色应该只更改将来要绘制的线条的颜色。

  • 强制执行“全部清除”命令不是强制性的,但如果您实施该命令,则将获得* 0.9奖励。


2
如何画线?布雷森汉姆线算法?线是否需要可变厚度?我们需要自己实施画线吗?请指定更多。通常假定我们的代码可以“导入标准库”。可以选择多少种颜色?2好吗?还是每次按下键盘按钮随机选择颜色?
贾斯汀2014年

2
需要更多说明:如何划界线?您是否单击两个点并在这些点之间画线?绘图画布必须有多大?必须支持多少种颜色?更改颜色还能更改其他所有行的颜色吗?等等,目前尚不足以解决这个挑战。
门把手

@Quincunx我已在问题中提问并告诉我现在是否可以。
Caridorc

2
1.请浓缩问答。消除问题,使答案独立于要点。请注意,有时有时会删除注释。不阅读评论,布雷森汉姆算法点毫无意义。我以为您在说的是不需要布雷森汉姆算法,任何算法或标准/库函数都可以。2.最终的取胜取决于使用哪种语言轻松进入API并访问“向右”按钮(而不是通常的向左按钮。)
Level River St

2
1.“最好在两点之间用鼠标绘制它们,但是可以使用其他任何方法。”像用铅笔工具在油漆中徒手绘制怎么样?我建议您将其弄清楚,或者完全消除“其他任何方法都可以”。2.应更好地指定更改颜色的方法。例如,是否可以通过键盘,通过使用其他鼠标按钮旋转颜色来完成操作,还是必须通过单击屏幕上的调色板来完成操作?
级圣河

Answers:


9

HTML + jQuery + CSS-507 x(0.7 x 0.8 x 0.9)= 255.528

不像我想的那么短,但是我喜欢结果。

特征:

  • 单击并拖动绘图模式。(0.7
  • 七种颜色(黑色+彩虹)。
  • 可变的画笔宽度(滑块控制)。(0.8
  • 清除所有功能。(0.9

现场演示: http : //jsfiddle.net/onsLkh8y/9/


HTML-84字节

<input id="r" type="range" min="1" max="9"><canvas id="c" width="600" height="400"/>

CSS-35字节

#c{border:1px solid;cursor:pointer}

jQuery-388/446字节

符合W3C的浏览器(例如Chrome)-388字节

var t=c.getContext('2d');$.each('black0red0orange0yellow0green0blue0purple0clear'.split(0),function(k,v){
$(r).before($('<button>'+v+'</button>').click(function(){k>6?t.clearRect(0,0,600,400):t.strokeStyle=v}))})
$(c).mousedown(function(e){t.lineWidth=$(r).val();t.beginPath();t.moveTo(e.offsetX,e.offsetY)})
.mousemove(function(e){if(e.which==1){t.lineTo(e.offsetX,e.offsetY);t.stroke()}})

跨浏览器版本(Firefox,Safari,IE的修复程序)-446字节

var t=c.getContext('2d');$.each('black0red0orange0yellow0green0blue0purple0clear'.split(0),function(k,v){
$(r).before($('<button>'+v+'</button>').click(function(){k>6?t.clearRect(0,0,600,400):t.strokeStyle=v}))})
var d,p=$(c).offset();$(c).mousedown(function(e){d=t.lineWidth=$(r).val();t.beginPath()t.moveTo(e.pageX-p.left,
e.pageY-p.top)}).mousemove(function(e){if(d){t.lineTo(e.pageX-p.left,e.pageY-p.top);t.stroke()}}).mouseup(function(){d=0})

修正:

  • FireFox- event.offset[X|Y]未定义。
  • Safari- event.which并且event.buttons在上没有有意义的定义mousemove
  • Internet Explorer-可以使用上述两个修复程序,尽管使用e.buttons就足够了。

1
$(document).ready在codegolf中可用?
edc65

您不需要引号id=,也许也不需要引号(有一段时间没有HTML了)
Cyoce

10

处理中-93·0.9 = 83.7

几乎没有绘画的开销,但是语法很冗长,在处理中可能没有任何不错的功能并且只有一个奖励而达到了最佳分数:

void setup(){
size(600,400);
}
void draw(){
if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);
}

得分:93·0.9 = 83.7(换行符仅供参考,不计入得分。)

但是,有了所有这些奖金,它会变得更加有趣:

void setup(){
size(600,400);
}
int i,x,y;
void draw(){
stroke(7*i%256,5*i%256,i%256);
strokeWeight(i%9);
if(keyPressed)i++;
if(!mousePressed){x=mouseX;y=mouseY;if(x<0)background(0);}
}
void mouseReleased(){
line(x,y,mouseX,mouseY);
}

得分:221·0.8·0.7·0.9 = 111.4

它的用法是这样的:

  • 单击并拖动鼠标以绘制一条直线。

  • 单击时,将鼠标从窗口左侧拖出,然后释放鼠标按钮以清除屏幕。

  • 按住任意键将在图纸颜色的红色,绿色和蓝色值之间以及不同的笔触粗细之间循环。由于循环周期不同,因此几乎可以达到所有组合(需要一些尝试)。

彩色输出1

编辑:

由于徒手画也给0.7奖金,因此这是另一个解决方案:

void setup(){
size(600,400);
}
int i;
void draw(){
stroke(7*i%256,5*i%256,i%256);
strokeWeight(i%9);
if(keyPressed)i++;
if(key>9)background(0);
if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);
}

得分:188·0.8·0.7·0.9 = 94.8

它的用法是这样的:

  • 单击并拖动以绘制手绘线。

  • 按住Tab键可更改颜色和笔触粗细。这也可以在绘制时完成(参见图片)。

  • 击除选项卡外的任何键,然后按选项卡以清除屏幕。

彩色输出2


徒手画也给您奖金。
Caridorc

@Caridorc:啊,太好了。然后,我将更新我的答案。
埃米尔(Emil)2014年

2
那将很难被击败。
普里莫

if(key>0)短于if(keyPressed)
user41805

9

蟒2.7 - 339 197 324 *(0.7 * 0.8 * 0.9)= 163

编辑:我发现pygame可以绘制宽度可变的线条,所以这是一个更新。

使用PyGame模块的实验。

一个简单的绘制程序,它绘制从MOUSEDOWN事件(值5)到MOUSEUP事件(值6)的线。它使用pygame.gfxdraw.line()函数。按TAB键将循环显示8种颜色。按BACKSPACE键会将显示屏清除为精心制作的白色纸张。ENTER键将使画笔大小在0-7像素的宽度之间循环。

我是代码高尔夫球的新手,所以我可能错过了一些减少代码大小的方法。

import pygame as A,pygame.draw as G
P=A.display
D=P.set_mode((600,400))
C=(0,255)
S=[(r,g,b) for r in C for g in C for b in C]
w=n=1
while n:
 e=A.event.wait()
 t=e.type
 if t==12:n=0
 if t==2:
  if e.key==9:n+=1
  if e.key==13:w+=1
  if e.key==8:D.fill(S[7])
 if t==5:p=e.pos
 if t==6:G.line(D,S[n%8],p,e.pos,w%8)
 P.flip()

示例图片1:

一架飞机的可怕照片

示例图片2:

景观


9
现在,我的计算机上有一个名为的文件ms-paint.py
primo

1
享受速度和干净的GUI。MS-Paint的含义。我希望我不会被某个大型软件公司起诉...
Logic Knight 2014年

5

C#519 x 0.7 x 0.8 x 0.9 = 261.6使用DrawLine方法。

打高尔夫球:

using System;using System.Drawing;using System.Windows.Forms;class f:Form{[STAThread]static void Main(){f F=new f{Width=600,Height=400};Point s=default(Point);sbyte[]c={0,0,0,1};F.MouseDown+=(_,e)=>{s=new Point(e.X,e.Y);};F.MouseUp+=(_,e)=>{F.CreateGraphics().DrawLine(new Pen(Color.FromArgb(255,c[0],c[1],c[2]),c[3]),s.X,s.Y,e.X,e.Y);};F.KeyPress+=(a,e)=>{unchecked{switch(e.KeyChar){case'r':c[0]++;break;case'g':c[1]++;break;case'b':c[2]++;break;case't':c[3]++;break;case'c':F.Invalidate();break;}}};F.ShowDialog();}}

可读性:

using System;
using System.Drawing;
using System.Windows.Forms;

class f : Form
{
    [STAThread]
    static void Main()
    {
        f F = new f { Width = 600, Height = 400 };
        Point s = default(Point);
        sbyte[] c = { 0, 0, 0, 1 };
        F.MouseDown += (_, e) => { s = new Point(e.X, e.Y); };
        F.MouseUp += (_, e) => { F.CreateGraphics().DrawLine(new Pen(Color.FromArgb(255, c[0], c[1], c[2]), c[3]), s.X, s.Y, e.X, e.Y); };
        F.KeyPress += (a, e) =>
        {
            unchecked
            {
                switch (e.KeyChar)
                {
                    case 'r': c[0]++; break;
                    case 'g': c[1]++; break;
                    case 'b': c[2]++; break;
                    case 't': c[3]++; break;
                    case 'c': F.Invalidate();break;
                }

            }
        };
        F.ShowDialog();
    }
}

通过按住键盘上的rgb,它可以通过增加相应索引处的字节数组来更改下一行的颜色。溢出时它将再次从0开始。因此,这给了我们很多颜色。通过保持t增加线的粗细也是如此。按c清除表格。


5

Mathematica-333 x 0.7 x 0.8 x 0.9 = 168

l = {}; c = Black; s = .01;
ColorSetter@Dynamic@c
Dynamic@s~Slider~{0, .02}
Button["Clear", l = {}]
"/" Checkbox@Dynamic@b
EventHandler[
 Dynamic@Graphics@{White, Rectangle@{600, 400}, l},
 {"MouseDown" :> 
   AppendTo[l, p = {}; {c, Thickness@s, Line@Dynamic@p}], 
  "MouseDragged" :> (p = 
     Append[p, MousePosition@"Graphics"][[If[b, {1, -1}, All]]]),
  "MouseUp" :> (l[[-1, 3]] = Line@p)
  }
 ]

在此处输入图片说明


这样可以从点到点画线吗?它似乎只允许徒手绘制。
trichoplax 2014年

@githubphagocyte是的,只有此刻才有空。
2014年

1
@githubphagocyte添加了一条直线选项
swish

迄今为止最好的答案。
primo

我爱绘画。
tomsmeding 2014年

4

Tcl / Tk,252

x 0,8 x 0,7 x 0,9

= 127,008

253 x 0,8 x 0,7 x 0,9 = 127,512

254 x 0,8 x 0,7 x 0,9 = 128,016

255 x 0,8 x 0,7 x 0,9 = 128,52

grid [canvas .c -w 600 -he 400]
set c red
incr t
lmap k {1
B1-Motion
3
MouseWheel
2} s {{set L [.c cr l %x %y %x %y -f $c -w $t]}
{.c coo $L "[.c coo $L] %x %y"}
{set c [tk_chooseColor]}
{if $t|%D>0 {incr t [expr %D/120]}}
{.c de all}} {bind . <$k> $s}

Tcl / Tk,267

x 0,8 x 0,7 x 0,9

= 134,568

grid [canvas .c -w 600 -he 400]
set c red
set t 0
bind .c <1> {set L [.c cr l %x %y %x %y -f $c -w $t]}
bind .c <B1-Motion> {.c coo $L "[.c coo $L] %x %y"}
bind .c <3> {set c [tk_chooseColor]}
bind .c <MouseWheel> {if $t||%D>0 {incr t [expr %D/120]}}
bind .c <2> {.c de all}

要使用它:

  • 鼠标左键表现为问题要求
  • 初始颜色为红色。鼠标右键显示一个对话框,允许用户选择下一次将使用的颜色。始终按OK(确定)按钮,否则颜色将不确定。我可以解决这个问题,但是会消耗字节
  • 要调整将在下一次使用的线条的粗细,可以旋转鼠标滚轮:上=较厚,下=较薄
  • 要清除图像,请按鼠标中键

一个简单的测试:

在此处输入图片说明


2

DarkBASIC Pro-318 x 0.7 x 0.9 = 200.34

这里最有趣的是在当前键盘的扫描代码上使用一些按位逻辑来更改颜色。对于每个通道,我使用扫描码中的两个不同位-几乎可以使用任何6位颜色。

  • 按住键盘上的任意键以使用颜色(在我的美式键盘上:白色= F5,黑色=无键,红色= 2,绿色=-(减号),蓝色= b)
  • 右键单击以清除

这是一个编译的EXE:下载

#constant a set current bitmap
set display mode 800,400,32
create bitmap 1,800,400
do
s=scancode()
ink rgb((s&&3)*85,((s/4)&&3)*85,((s>>4)&&3)*85),0
m=mousex()
n=mousey()
o=mouseclick()
if o*(d=0) then d=1:x=m:y=n
a 1
if (o=0)*d then d=0:line x,y,m,n
if o=2 then cls
a 0
cls
copy bitmap 1,0
if d then line x,y,m,n
loop

1

BBC BASIC-141没有奖金

我的第一门编程语言,现在不再使用:)

SYS "SetWindowPos",@hwnd%,0,0,0,600,400,6:VDU 26
1 MOUSE X,Y,b
IF b=4 THEN GOTO 4
GOTO 1
4 MOUSE x,y,b
IF b=0 THEN LINE X,Y,x,y:GOTO 1
GOTO 4

1

Python 2.7-384 * .8 * .7 = 215.04

from Tkinter import*;o=1
a='0f';C=['#'+r+g+b for r in a for g in a for b in a]
def i(a):global o;o+=1
def d(a):global o;o-=1
def I(a):global u;u+=1
def D(a):global u;u-=1
m=Tk();u=0;c=Canvas(width=600,height=400);c.bind("<B1-Motion>",lambda x:c.create_rectangle((x.x,x.y,x.x+o,x.y+o),fill=C[u],outline=C[u]));m.bind("q",i);m.bind("w",d);m.bind("x",D);m.bind("z",I);c.pack();mainloop()

含所有奖金:462 * .9 * .8 * .7 = 232.848

from Tkinter import*;o=1
a='0f';C=['#'+r+g+b for r in a for g in a for b in a]
def i(a):global o;o+=1
def d(a):global o;o-=1
def I(a):global u;u+=1
def D(a):global u;u-=1
m=Tk();u=0;c=Canvas(width=600,height=400);c.bind("<B1-Motion>",lambda x:c.create_rectangle((x.x,x.y,x.x+o,x.y+o),fill=C[u],outline=C[u]));m.bind("q",i);m.bind("w",d);m.bind("x",D);m.bind("z",I);m.bind("m",lambda _:c.create_rectangle((0,0,602,402),fill=C[7],outline=C[5]));c.pack();mainloop()
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.