我编码着着色刷,但在P5J中不起作用

发布于 2025-02-09 20:11:50 字数 1259 浏览 0 评论 0原文

我正在创建一个基于鼠标的画家应用程序。我想一个刷子,其颜色是由P5J中的颜色拾取器选择的。而且我认为我完成了编码,但是它根本没有起作用...并且有人可以帮助我吗?我想看看我在哪里犯了错误。 thanx,进步!

```
var brushSize;
let activeBrush = 0;

function setup() {
  brushSize = 10;
  createCanvas(800, 800);
  colorPicker = createColorPicker('#ed225d');
  colorPicker.position(600, 20);
  background(220);


function draw() {
  colorMode(RGB);
  brushColor = colorPicker.color();
  noStroke();
 
function keyTyped() {
  if (key == '=') { //becomes bigger and smaller by 10% with [=] and [-] keys, respectively, but not working...
     brushSize = brushSize + brushSize*0.1;
  } else if (key == '-') {
     brushSize = brushSize - brushSize*0.1;
  } else if (key == 'c') { //when [C] is pressed, everything on canvas gets deleted, but it's not working at all..
        noStroke();//clear button
        fill(220);
        rectMode(CORNER);
        rect(0, 0, 800, 800);
  } else if (key == 's') { //when [S] is pressed, current content on canvas is saved as an image file ,, but it's not working at all..
    let b = createCanvas(800, 800);
    saveCanvas(b, 'myCanvas', 'jpg');
     } 
  } 
}
function mouseDragged(){
fill(colorPicker);
ellipse(mouseX, mouseY, brushSize, brushSize)}} // plus why this isn't working..?? TT
```

I was creating a mouse-based painter app. I wanna a brush whose color is chosen by a color picker in p5js. And I think I finished coding, but it's not working at all... and is there anybody who can help me? I wanna see where I did make mistake....!
thanx, advance!

```
var brushSize;
let activeBrush = 0;

function setup() {
  brushSize = 10;
  createCanvas(800, 800);
  colorPicker = createColorPicker('#ed225d');
  colorPicker.position(600, 20);
  background(220);


function draw() {
  colorMode(RGB);
  brushColor = colorPicker.color();
  noStroke();
 
function keyTyped() {
  if (key == '=') { //becomes bigger and smaller by 10% with [=] and [-] keys, respectively, but not working...
     brushSize = brushSize + brushSize*0.1;
  } else if (key == '-') {
     brushSize = brushSize - brushSize*0.1;
  } else if (key == 'c') { //when [C] is pressed, everything on canvas gets deleted, but it's not working at all..
        noStroke();//clear button
        fill(220);
        rectMode(CORNER);
        rect(0, 0, 800, 800);
  } else if (key == 's') { //when [S] is pressed, current content on canvas is saved as an image file ,, but it's not working at all..
    let b = createCanvas(800, 800);
    saveCanvas(b, 'myCanvas', 'jpg');
     } 
  } 
}
function mouseDragged(){
fill(colorPicker);
ellipse(mouseX, mouseY, brushSize, brushSize)}} // plus why this isn't working..?? TT
```

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

所有深爱都是秘密 2025-02-16 20:11:50

无论MouseXMousey来自OP代码中,它们都是错误的。在阻力上绘画是直截了当的。根据OP中所述的要求,不需要绘制功能,只需在拖动时添加到画布中即可。

这是一些工作代码,以用作起动器。

const sketch = function(p) {

  let colorPicker;
  let brushSize = 20;
  
  p.setup = function() {
    p.createCanvas(600, 600);
    colorPicker = p.createColorPicker('red');
    colorPicker.position(0, 0);
  };



  p.keyPressed = function(e) {
    let key = e.key;
    if (key === '=') brushSize += brushSize * 0.1;
    else if (key === '-') brushSize -= brushSize * 0.1;
    else if (key === 'c') p.clear();
  }

  p.mouseDragged = function(e) {
    color = colorPicker.color()
    p.fill(color);
    p.stroke(color);
    p.ellipse(e.clientX, e.clientY, brushSize, brushSize / 2)
  }
 
};

let myp5 = new p5(sketch);
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

It's likely that, wherever mouseX and mouseY are coming from in the OP code, they are wrong. Painting on drag is straight-forward. From the requirements stated in the OP, there's no need for a draw function, just add to the canvas on drag.

Here's some working code to use as a starter....

const sketch = function(p) {

  let colorPicker;
  let brushSize = 20;
  
  p.setup = function() {
    p.createCanvas(600, 600);
    colorPicker = p.createColorPicker('red');
    colorPicker.position(0, 0);
  };



  p.keyPressed = function(e) {
    let key = e.key;
    if (key === '=') brushSize += brushSize * 0.1;
    else if (key === '-') brushSize -= brushSize * 0.1;
    else if (key === 'c') p.clear();
  }

  p.mouseDragged = function(e) {
    color = colorPicker.color()
    p.fill(color);
    p.stroke(color);
    p.ellipse(e.clientX, e.clientY, brushSize, brushSize / 2)
  }
 
};

let myp5 = new p5(sketch);
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文