Question

我正在尝试构建一个简单的应用程序，当您在屏幕上按/单击时可以播放歌曲。一旦按下/单击，就会产生涟漪效果，并使其具有视觉效果。

每次按下/单击都会发生涟漪，但是在我的代码中（每次单击都会重新启动），您按下并会产生涟漪，但不会一直循环。我知道答案就在我的舌头上，但我无法弄清楚。另外，当我的草图加载时，会出现一个紫色框，我不确定为什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="resources\p5.js"></script>
    <script src="resources\p5.dom.js"></script>
    <script src="resources\p5.sound.js"></script>
    <script type="text/javascript" src="js\app.js"></script>
    <link rel="stylesheet" href="css\style.css">
    <title>Breathe</title>
</head>
<body>

</body>
</html>


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


let outerDiam = 0;
let cnv;
let drawThings;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() { 
  cnv = createCanvas(600, 600);
  centerCanvas();
  background(255, 0, 255);
} 

function windowResized() {
  centerCanvas();
}

function draw() { 
  if (drawThings) {
      background(255);
      for (let i = 0; i < 5; i++){
        let diam = outerDiam - 30 * i;    
        if (diam > 0){

          let fade = map(diam, 0, width, 0, 255);
            stroke(fade);
            noFill();
            ellipse(300, 300, diam);
    }


        outerDiam = outerDiam + 2;
    } 
    }
  }

function mousePressed() {
  drawThings = !drawThings;
}

Answer 1

在mousePressed函数中，您实际上从未重置过动画，而只是在切换播放。

function mousePressed() {
  drawThings = !drawThings;
}

单击后再次开始播放时，动画将从中断处继续播放。

将outerDiam重置为0，而不是单击时关闭绘图。所以这个：

function draw() { 
  if (drawThings) {
    [...]
  }

function mousePressed() {
  drawThings = !drawThings;
}

成为这个：

function draw() { 
  [...]
}

function mousePressed() {
  outerDiam = 0;
}

“紫色框”的创建也是由于背景一开始被设置为紫色：

function setup() { 
  [...]
  background(255, 0, 255); //red is 255, green is 0 and blue is 255 so it appears purple
}

当您通过draw（）中的背景函数开始绘制时，此设置将被覆盖，但是在代码中，您给定的背景保持该颜色，直到您单击drawThings的定义未开始并仅变为{第一次点击时为{1}}。

如果进行我上面建议的更改，则setup（）中的背景将立即被绘制，因此您根本看不到紫色背景。（我建议删除设置功能中的第一个后台功能。）

Answer 2

我修复了您的代码，现在每次按下鼠标时都会播放动画：

function modify_woocommerce_get_item_data( $item_data, $cart_item ) {
    if( $item_data || $cart_item['data']->is_type( 'variation' ) ) return $item_data;
    if ( $cart_item['data']->is_type( 'simple' ) ) {
    $attributes = array_filter( $cart_item['data']->get_attributes(), 'wc_attributes_array_filter_visible' );

    foreach ( $attributes as $attribute ) {
        $values = array();

            if ( $attribute->is_taxonomy() ) {
                $attribute_taxonomy = $attribute->get_taxonomy_object();
                $attribute_values   = wc_get_product_terms( $cart_item['data']->get_id(), $attribute->get_name(), array( 'fields' => 'all' ) );

                foreach ( $attribute_values as $attribute_value ) {
                    $value_name = esc_html( $attribute_value->name );

                    if ( $attribute_taxonomy->attribute_public ) {
                        $values[] = '<a href="' . esc_url( get_term_link( $attribute_value->term_id, $attribute->get_name() ) ) . '" rel="tag">' . $value_name . '</a>';
                    } else {
                        $values[] = $value_name;
                    }
                }
            } else {
                $values = $attribute->get_options();

                foreach ( $values as &$value ) {
                    $value = make_clickable( esc_html( $value ) );
                }
            }

            $item_data[] = array(
                'key'   => wc_attribute_label( $attribute->get_name() ),
                'value' => apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values ),
            );
        }
    }
    return $item_data;
}
add_filter( 'woocommerce_get_item_data', 'modify_woocommerce_get_item_data', 99, 2 );

p5js中的mousePressed问题

2 个答案: