From 1e69a3ebbd3f5e2307f81b8a46117a9b177d3a3d Mon Sep 17 00:00:00 2001 From: Asuka Minato Date: Fri, 5 Apr 2024 10:43:08 +0900 Subject: [PATCH 1/3] Create createAudio.mdx --- .../reference/zh-Hans/p5/createAudio.mdx | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 src/content/reference/zh-Hans/p5/createAudio.mdx diff --git a/src/content/reference/zh-Hans/p5/createAudio.mdx b/src/content/reference/zh-Hans/p5/createAudio.mdx new file mode 100644 index 0000000000..6fdf0b94c6 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createAudio.mdx @@ -0,0 +1,54 @@ +--- +title: createAudio +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个用于简单音频播放的隐藏<audio>元素。

+ +

createAudio()返回一个新的p5.MediaElement对象。

+ +

第一个参数src是音频的路径。如果传递了单个字符串，如'assets/video.mp4'，则加载单个音频。字符串数组可用于以不同格式加载同一音频。例如，['assets/video.mp4', 'assets/video.ogv', 'assets/video.webm']。这对于确保音频能够在不同的浏览器中播放很有用，因为不同的浏览器具有不同的功能。有关支持的格式的更多信息，请参见MDN。

+ +

第二个参数callback是可选的。它是一旦音频准备好播放就会调用的函数。

+line: 2194 +isConstructor: false +itemtype: method +example: + - |- + +
+ + function setup() { + noCanvas(); + + // Load the audio. + let beat = createAudio('/assets/beat.mp3'); + + // Show the default audio controls. + beat.showControls(); + + describe('An audio beat plays when the user double-clicks the square.'); + } + +
+class: p5 +params: + - name: src + description: | +

音频文件的路径，或者为了支持不同浏览器的多个路径数组。

+ type: '字符串|字符串[]' + optional: true + - name: callback + description: | +

一旦音频准备好播放即调用的函数。

+ type: 函数 + optional: true +return: + description: 新的p5.MediaElement对象。 + type: p5.MediaElement +chainable: false +--- + + +# createAudio From 9e5fd84e23accdfd1b02b872e8e7c44219d7429a Mon Sep 17 00:00:00 2001 From: Asuka Minato Date: Fri, 5 Apr 2024 11:08:44 +0900 Subject: [PATCH 2/3] missing files --- .../reference/zh-Hans/p5/createCapture.mdx | 171 +++++++++++++++ .../reference/zh-Hans/p5/createCheckbox.mdx | 114 ++++++++++ .../zh-Hans/p5/createColorPicker.mdx | 88 ++++++++ .../reference/zh-Hans/p5/createDiv.mdx | 63 ++++++ .../reference/zh-Hans/p5/createElement.mdx | 69 ++++++ .../reference/zh-Hans/p5/createFileInput.mdx | 131 +++++++++++ .../reference/zh-Hans/p5/createInput.mdx | 103 +++++++++ src/content/reference/zh-Hans/p5/createP.mdx | 47 ++++ .../reference/zh-Hans/p5/createRadio.mdx | 201 +++++++++++++++++ .../reference/zh-Hans/p5/createSelect.mdx | 206 ++++++++++++++++++ .../reference/zh-Hans/p5/createSlider.mdx | 145 ++++++++++++ .../reference/zh-Hans/p5/removeElements.mdx | 74 +++++++ src/content/reference/zh-Hans/p5/select.mdx | 92 ++++++++ .../reference/zh-Hans/p5/selectAll.mdx | 99 +++++++++ 14 files changed, 1603 insertions(+) create mode 100644 src/content/reference/zh-Hans/p5/createCapture.mdx create mode 100644 src/content/reference/zh-Hans/p5/createCheckbox.mdx create mode 100644 src/content/reference/zh-Hans/p5/createColorPicker.mdx create mode 100644 src/content/reference/zh-Hans/p5/createDiv.mdx create mode 100644 src/content/reference/zh-Hans/p5/createElement.mdx create mode 100644 src/content/reference/zh-Hans/p5/createFileInput.mdx create mode 100644 src/content/reference/zh-Hans/p5/createInput.mdx create mode 100644 src/content/reference/zh-Hans/p5/createP.mdx create mode 100644 src/content/reference/zh-Hans/p5/createRadio.mdx create mode 100644 src/content/reference/zh-Hans/p5/createSelect.mdx create mode 100644 src/content/reference/zh-Hans/p5/createSlider.mdx create mode 100644 src/content/reference/zh-Hans/p5/removeElements.mdx create mode 100644 src/content/reference/zh-Hans/p5/select.mdx create mode 100644 src/content/reference/zh-Hans/p5/selectAll.mdx diff --git a/src/content/reference/zh-Hans/p5/createCapture.mdx b/src/content/reference/zh-Hans/p5/createCapture.mdx new file mode 100644 index 0000000000..eade16fdbc --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createCapture.mdx @@ -0,0 +1,171 @@ +--- +title: createCapture +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个 <video> 元素，用于“捕获”来自 + + 网络摄像头和麦克风的音频/视频流。

+ +

createCapture() 返回一个新的 + + p5.MediaElement 对象。视频默认显示， + + 可以通过调用 capture.hide() 来隐藏，并使用 image() 绘制到 + + 画布上。

+ +

第一个参数，type，是可选的。它设置要使用的捕获类型。 + + 默认情况下，createCapture() 捕获音频和视频。 + 如果传入 VIDEO， + + 如 createCapture(VIDEO)，则只捕获视频。 + + 如果传入 AUDIO，如 createCapture(AUDIO)，则只捕获 + + 音频。也可以传入一个约束对象来自定义流。 + + 查看 + + W3C 文档 了解可能的属性。不同的浏览器支持 + + 不同的属性。

+ +

'flipped' 属性是一个可选属性，可以设置为 + {flipped:true} + + 来镜像视频输出。如果为 true，则意味着视频将被 + + 镜像或翻转，如果没有提及，则默认为 false。

+ +

第二个参数，callback，是可选的。它是一个准备好使用时调用的函数。回调函数应该有一个 + + 参数，stream，是一个 + + MediaStream 对象。

+ +

注意：createCapture() 只在本地运行草图或使用 HTTPS 时有效。了解更多 + + 这里 + + 和 这里。

+line: 2276 +isConstructor: false +itemtype: method +example: + - |- + +
+ + function setup() { + noCanvas(); + + // Create the video capture. + createCapture(VIDEO); + + describe('A video stream from the webcam.'); + } + +
+ +
+ + let capture; + + function setup() { + createCanvas(100, 100); + + // Create the video capture and hide the element. + capture = createCapture(VIDEO); + capture.hide(); + + describe('A video stream from the webcam with inverted colors.'); + } + + function draw() { + // Draw the video capture within the canvas. + image(capture, 0, 0, width, width * capture.height / capture.width); + + // Invert the colors in the stream. + filter(INVERT); + } + +
+
+ + let capture; + + function setup() { + createCanvas(100, 100); + + // Create the video capture with mirrored output. + capture = createCapture(VIDEO,{ flipped:true }); + capture.size(100,100); + + describe('A video stream from the webcam with flipped or mirrored output.'); + } + + +
+ +
+ + function setup() { + createCanvas(480, 120); + + // Create a constraints object. + let constraints = { + video: { + mandatory: { + minWidth: 1280, + minHeight: 720 + }, + optional: [{ maxFrameRate: 10 }] + }, + audio: false + }; + + // Create the video capture. + createCapture(constraints); + + describe('A video stream from the webcam.'); + } + +
+class: p5 +params: + - name: type + description: | +

捕获的类型，可以是 AUDIO 或 VIDEO， + 或一个约束对象。默认情况下，视频和音频 + 流都被捕获。

+ type: 字符串|常数|对象 + optional: true + - name: flipped + description: > +

翻转捕获的视频并镜像输出， + {flipped:true}。默认情况下为 false。

+ type: 对象 + optional: true + - name: callback + description: | +

流加载完成后调用的函数。

+ type: 函数 + optional: true +return: + description: 新的 p5.MediaElement 对象。 + type: p5.MediaElement +chainable: false +--- + + +# createCapture diff --git a/src/content/reference/zh-Hans/p5/createCheckbox.mdx b/src/content/reference/zh-Hans/p5/createCheckbox.mdx new file mode 100644 index 0000000000..ad0e014715 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createCheckbox.mdx @@ -0,0 +1,114 @@ +--- +title: createCheckbox +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个复选框<input></input>元素。

+ +

复选框扩展了p5.Element类，增加了一个checked()方法。调用myBox.checked()如果复选框被选中则返回true，否则返回false。

+ +

第一个参数，label，是可选的。它是一个字符串，用于设置显示在复选框旁边的标签。

+ +

第二个参数，value，也是可选的。它是一个布尔值，用于设置复选框的值。

line: 1007 +isConstructor: false +itemtype: method +example: + - |- + +
+ + let checkbox; + + function setup() { + createCanvas(100, 100); + + // Create a checkbox and place it beneath the canvas. + checkbox = createCheckbox(); + checkbox.position(0, 100); + + describe('A black square with a checkbox beneath it. The square turns white when the box is checked.'); + } + + function draw() { + // Use the checkbox to set the background color. + if (checkbox.checked()) { + background(255); + } else { + background(0); + } + } + +
+ +
+ + let checkbox; + + function setup() { + createCanvas(100, 100); + + // Create a checkbox and place it beneath the canvas. + // Label the checkbox "white". + checkbox = createCheckbox(' white'); + checkbox.position(0, 100); + + describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.'); + } + + function draw() { + // Use the checkbox to set the background color. + if (checkbox.checked()) { + background(255); + } else { + background(0); + } + } + +
+ +
+ + let checkbox; + + function setup() { + createCanvas(100, 100); + + // Create a checkbox and place it beneath the canvas. + // Label the checkbox "white" and set its value to true. + checkbox = createCheckbox(' white', true); + checkbox.position(0, 100); + + describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.'); + } + + function draw() { + // Use the checkbox to set the background color. + if (checkbox.checked()) { + background(255); + } else { + background(0); + } + } + +
+class: p5 +params: + - name: label + description: | +

复选框后显示的标签。

+ type: 字符串 + optional: true + - name: value + description: > +

复选框的值。选中为true，未选中为false。

+ type: 布尔 + optional: true +return: + description: 新的p5.Element对象。 + type: p5.Element +chainable: false +--- + + +# createCheckbox diff --git a/src/content/reference/zh-Hans/p5/createColorPicker.mdx b/src/content/reference/zh-Hans/p5/createColorPicker.mdx new file mode 100644 index 0000000000..db30184e5f --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createColorPicker.mdx @@ -0,0 +1,88 @@ +--- +title: createColorPicker +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个颜色选择器元素。

+ +

参数value是可选的。如果传递了颜色字符串或p5.Color对象，则会设置默认颜色。

+ +

颜色选择器扩展了p5.Element类，增加了一些管理颜色的有用方法：

+ + +line: 1740 +isConstructor: false +itemtype: method +example: + - |- + +
+ + let myPicker; + + function setup() { + createCanvas(100, 100); + + // Create a color picker and set its position. + myPicker = createColorPicker('deeppink'); + myPicker.position(0, 100); + + describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.'); + } + + function draw() { + // Use the color picker to paint the background. + let c = myPicker.color(); + background(c); + } + +
+ +
+ + let myPicker; + + function setup() { + createCanvas(100, 100); + + // Create a color picker and set its position. + myPicker = createColorPicker('deeppink'); + myPicker.position(0, 100); + + describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.'); + } + + function draw() { + // Use the color picker to paint the background. + let c = myPicker.value(); + background(c); + + // Display the current color as a hex string. + text(c, 25, 55); + } + +
+class: p5 +params: + - name: value + description: > +

默认颜色，为CSS颜色字符串。

+ type: 字符串|p5.Color + optional: true +return: + description: 新的p5.Element对象。 + type: p5.Element +chainable: false +--- + + +# createColorPicker diff --git a/src/content/reference/zh-Hans/p5/createDiv.mdx b/src/content/reference/zh-Hans/p5/createDiv.mdx new file mode 100644 index 0000000000..4e2e383898 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createDiv.mdx @@ -0,0 +1,63 @@ +--- +title: createDiv +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个<div></div>元素。

+ +

<div></div>元素通常用作其他元素的容器。

+ +

参数html是可选的。它接受一个字符串，该字符串设置了新<div></div>的内部HTML。

+line: 490 +isConstructor: false +itemtype: method +example: + - |- + +
+ + function setup() { + createCanvas(100, 100); + + background(200); + + // Create a div element and set its position. + let div = createDiv('p5*js'); + div.position(25, 35); + + describe('A gray square with the text "p5*js" written in its center.'); + } + +
+ +
+ + function setup() { + createCanvas(100, 100); + + background(200); + + // Create an h3 element within the div. + let div = createDiv('

p5*js

'); + div.position(20, 5); + + describe('A gray square with the text "p5*js" written in its center.'); + } + +
+class: p5 +params: + - name: html + description: > +

新<div></div>元素的内部HTML。

+ type: 字符串 + optional: true +return: + description: 新的p5.Element对象。 + type: p5.Element +chainable: false +--- + + +# createDiv diff --git a/src/content/reference/zh-Hans/p5/createElement.mdx b/src/content/reference/zh-Hans/p5/createElement.mdx new file mode 100644 index 0000000000..1e48210d46 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createElement.mdx @@ -0,0 +1,69 @@ +--- +title: createElement +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个新的p5.Element对象。

+ +

第一个参数tag是一个HTML标签的字符串，例如'h5'。

+ +

第二个参数content是可选的。它是一个字符串，用于设置要插入新元素的HTML内容。新元素默认没有内容。

+line: 2467 +isConstructor: false +itemtype: method +example: + - |- + +
+ + function setup() { + createCanvas(100, 100); + + background(200); + + // Create an h5 element with nothing in it. + createElement('h5'); + + describe('A gray square.'); + } + +
+ +
+ + function setup() { + createCanvas(100, 100); + + background(200); + + // Create an h5 element with the content "p5*js". + let h5 = createElement('h5', 'p5*js'); + + // Set the element's style and position. + h5.style('color', 'deeppink'); + h5.position(30, 15); + + describe('The text "p5*js" written in pink in the middle of a gray square.'); + } + +
+class: p5 +params: + - name: tag + description: | +

新元素的标签。

+ type: 字符串 + - name: content + description: | +

要插入元素的HTML内容。

+ type: 字符串 + optional: true +return: + description: 新的p5.Element对象。 + type: p5.Element +chainable: false +--- + + +# createElement diff --git a/src/content/reference/zh-Hans/p5/createFileInput.mdx b/src/content/reference/zh-Hans/p5/createFileInput.mdx new file mode 100644 index 0000000000..7ea8698090 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createFileInput.mdx @@ -0,0 +1,131 @@ +--- +title: createFileInput +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个类型为 'file' 的 <input></input> 元素。

+ +

createFileInput() 允许用户选择本地文件用于草图中。 + + 它返回一个 p5.File 对象。

+ +

第一个参数，callback，是一个文件 + + 加载时调用的函数。回调函数应该有一个参数，file， + 是一个 + + p5.File 对象。

+ +

第二个参数，multiple，是可选的。它是一个布尔值， + + 如果设置为 true，允许加载多个文件。如果 + true，callback + + 将被每个文件调用一次。

+line: 1923 +isConstructor: false +itemtype: method +example: + - |- + +
+ + // Use the file input to select an image to + // load and display. + let input; + let img; + + function setup() { + createCanvas(100, 100); + + // Create a file input and place it beneath + // the canvas. + input = createFileInput(handleImage); + input.position(0, 100); + + describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.'); + } + + function draw() { + background(200); + + // Draw the image if loaded. + if (img) { + image(img, 0, 0, width, height); + } + } + + // Create an image if the file is an image. + function handleImage(file) { + if (file.type === 'image') { + img = createImg(file.data, ''); + img.hide(); + } else { + img = null; + } + } + +
+ +
+ + // Use the file input to select multiple images + // to load and display. + let input; + let images = []; + + function setup() { + // Create a file input and place it beneath + // the canvas. Allow it to load multiple files. + input = createFileInput(handleImage, true); + input.position(0, 100); + } + + function draw() { + background(200); + + // Draw the images if loaded. Each image + // is drawn 20 pixels lower than the + // previous image. + for (let i = 0; i < images.length; i += 1) { + // Calculate the y-coordinate. + let y = i * 20; + + // Draw the image. + image(img, 0, y, 100, 100); + } + + describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.'); + } + + // Create an image if the file is an image, + // then add it to the images array. + function handleImage(file) { + if (file.type === 'image') { + let img = createImg(file.data, ''); + img.hide(); + images.push(img); + } + } + +
+class: p5 +params: + - name: callback + description: | +

文件加载后调用的函数。

+ type: 函数 + - name: multiple + description: | +

允许选择多个文件。

+ type: 布尔 + optional: true +return: + description: 新的 p5.File 对象。 + type: p5.File +chainable: false +--- + + +# createFileInput diff --git a/src/content/reference/zh-Hans/p5/createInput.mdx b/src/content/reference/zh-Hans/p5/createInput.mdx new file mode 100644 index 0000000000..aa860d7892 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createInput.mdx @@ -0,0 +1,103 @@ +--- +title: createInput +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个文本<input></input>元素。

+ +

调用myInput.size()来设置文本框的长度。

+ +

第一个参数value是可选的。它是一个字符串，用于设置输入框的默认值。默认情况下，输入框为空。

+ +

第二个参数type也是可选的。它是一个字符串，指定输入文本的类型。参见MDN以获取完整的选项列表。默认值为'text'。

+line: 1840 +isConstructor: false +itemtype: method +example: + - |- + +
+ + let myInput; + + function setup() { + createCanvas(100, 100); + + // Create an input element and place it + // beneath the canvas. + myInput = createInput(); + myInput.position(0, 100); + + describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.'); + } + + function draw() { + background(200); + + // Use the input to display a message. + let msg = myInput.value(); + text(msg, 25, 55); + } + +
+ +
+ + let myInput; + + function setup() { + createCanvas(100, 100); + + // Create an input element and place it + // beneath the canvas. Set its default + // text to "hello!". + myInput = createInput('hello!'); + myInput.position(0, 100); + + describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.'); + } + + function draw() { + background(200); + + // Use the input to display a message. + let msg = myInput.value(); + text(msg, 25, 55); + } + +
+class: p5 +return: + description: 新的p5.Element对象。 + type: p5.Element +overloads: + - line: 1840 + params: + - name: value + description: > +

输入框的默认值。默认为空字符串''。

+ type: 字符串 + optional: true + - name: type + description: | +

输入类型。默认为'text'。

+ type: 字符串 + optional: true + return: + description: 新的p5.Element对象。 + type: p5.Element + - line: 1910 + params: + - name: value + description: '' + type: 字符串 + optional: true + return: + description: '' + type: p5.Element +chainable: false +--- + + +# createInput diff --git a/src/content/reference/zh-Hans/p5/createP.mdx b/src/content/reference/zh-Hans/p5/createP.mdx new file mode 100644 index 0000000000..158195c595 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createP.mdx @@ -0,0 +1,47 @@ +--- +title: createP +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个<p></p>元素。

+ +

<p></p>元素通常用于段落长度的文本。

+ +

参数html是可选的。它接受一个字符串，该字符串设置了新<p></p>的内部HTML。

+line: 542 +isConstructor: false +itemtype: method +example: + - |- + +
+ + function setup() { + createCanvas(100, 100); + + background(200); + + // Create a paragraph element and set its position. + let p = createP('Tell me a story.'); + p.position(5, 0); + + describe('A gray square displaying the text "Tell me a story." written in black.'); + } + +
+class: p5 +params: + - name: html + description: | +

新<p></p>元素的内部HTML。

+ type: 字符串 + optional: true +return: + description: 新的p5.Element对象。 + type: p5.Element +chainable: false +--- + + +# createP diff --git a/src/content/reference/zh-Hans/p5/createRadio.mdx b/src/content/reference/zh-Hans/p5/createRadio.mdx new file mode 100644 index 0000000000..5f531293f5 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createRadio.mdx @@ -0,0 +1,201 @@ +--- +title: createRadio +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个单选按钮元素。

+ +

参数是可选的。如果传递了一个字符串，如 + + let myRadio = createSelect('food')，那么每个单选选项将 + + 有 "food" 作为其 name 参数：<input + name="food"></input>。 + + 如果传递了一个现有的 <div></div> 或 + <span></span> + + 元素，如 let myRadio = createSelect(container)， + 它将 + + 成为单选按钮的父元素。

+ +

单选按钮扩展了 p5.Element 类，增加了一些 + + 有用的方法来管理选项：

+ + +line: 1439 +isConstructor: false +itemtype: method +example: + - |- + +
+ + let myRadio; + + function setup() { + createCanvas(100, 100); + + // Create a radio button element and place it + // in the top-left corner. + myRadio = createRadio(); + myRadio.position(0, 0); + myRadio.size(60); + + // Add a few color options. + myRadio.option('red'); + myRadio.option('yellow'); + myRadio.option('blue'); + + // Choose a default option. + myRadio.selected('yellow'); + + describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.'); + } + + function draw() { + // Set the background color using the radio button. + let g = myRadio.value(); + background(g); + } + +
+ +
+ + let myRadio; + + function setup() { + createCanvas(100, 100); + + // Create a radio button element and place it + // in the top-left corner. + myRadio = createRadio(); + myRadio.position(0, 0); + myRadio.size(50); + + // Add a few color options. + // Color values are labeled with + // emotions they evoke. + myRadio.option('red', 'love'); + myRadio.option('yellow', 'joy'); + myRadio.option('blue', 'trust'); + + // Choose a default option. + myRadio.selected('yellow'); + + describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.'); + } + + function draw() { + // Set the background color using the radio button. + let c = myRadio.value(); + background(c); + } + +
+ +
+ + let myRadio; + + function setup() { + createCanvas(100, 100); + + // Create a radio button element and place it + // in the top-left corner. + myRadio = createRadio(); + myRadio.position(0, 0); + myRadio.size(50); + + // Add a few color options. + myRadio.option('red'); + myRadio.option('yellow'); + myRadio.option('blue'); + + // Choose a default option. + myRadio.selected('yellow'); + + // Create a button and place it beneath the canvas. + let btn = createButton('disable'); + btn.position(0, 100); + + // Call disableRadio() when btn is pressed. + btn.mousePressed(disableRadio); + + describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.'); + } + + function draw() { + // Set the background color using the radio button. + let c = myRadio.value(); + background(c); + } + + // Disable myRadio. + function disableRadio() { + myRadio.disable(true); + } + +
+class: p5 +return: + description: 新的 p5.Element 对象。 + type: p5.Element +overloads: + - line: 1439 + params: + - name: containerElement + description: > +

容器 HTML 元素，可以是 + <div></div> + + 或 <span></span>。

+ type: 对象 + optional: true + return: + description: 新的 p5.Element 对象。 + type: p5.Element + - line: 1573 + params: + - name: name + description: > +

分配给每个选项的 <input></input> 元素的 name 参数。

+ type: 字符串 + optional: true + return: + description: 新的 p5.Element 对象。 + type: p5.Element + - line: 1578 + params: [] + return: + description: 新的 p5.Element 对象。 + type: p5.Element +chainable: false +--- + + +# createRadio diff --git a/src/content/reference/zh-Hans/p5/createSelect.mdx b/src/content/reference/zh-Hans/p5/createSelect.mdx new file mode 100644 index 0000000000..4062cb4af2 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createSelect.mdx @@ -0,0 +1,206 @@ +--- +title: createSelect +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个下拉菜单<select></select>元素。

+ +

参数是可选的。如果传递了true，如let mySelect = createSelect(true)，则下拉菜单将支持多选。如果传递了一个现有的<select></select>元素，如let mySelect = createSelect(otherSelect)，则现有元素将被包装在一个新的p5.Element对象中。

+ +

下拉菜单扩展了p5.Element类，增加了一些管理选项的有用方法：

+ + +line: 1158 +isConstructor: false +itemtype: method +example: + - |- + +
+ + let mySelect; + + function setup() { + createCanvas(100, 100); + + // Create a dropdown and place it beneath the canvas. + mySelect = createSelect(); + mySelect.position(0, 100); + + // Add color options. + mySelect.option('red'); + mySelect.option('green'); + mySelect.option('blue'); + mySelect.option('yellow'); + + // Set the selected option to "red". + mySelect.selected('red'); + + describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.'); + } + + function draw() { + // Use the selected value to paint the background. + let c = mySelect.selected(); + background(c); + } + +
+ +
+ + let mySelect; + + function setup() { + createCanvas(100, 100); + + // Create a dropdown and place it beneath the canvas. + mySelect = createSelect(); + mySelect.position(0, 100); + + // Add color options. + mySelect.option('red'); + mySelect.option('green'); + mySelect.option('blue'); + mySelect.option('yellow'); + + // Set the selected option to "red". + mySelect.selected('red'); + + // Disable the "yellow" option. + mySelect.disable('yellow'); + + describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.'); + } + + function draw() { + // Use the selected value to paint the background. + let c = mySelect.selected(); + background(c); + } + +
+ +
+ + let mySelect; + + function setup() { + createCanvas(100, 100); + + // Create a dropdown and place it beneath the canvas. + mySelect = createSelect(); + mySelect.position(0, 100); + + // Add color options with names and values. + mySelect.option('one', 'red'); + mySelect.option('two', 'green'); + mySelect.option('three', 'blue'); + mySelect.option('four', 'yellow'); + + // Set the selected option to "one". + mySelect.selected('one'); + + describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.'); + } + + function draw() { + // Use the selected value to paint the background. + let c = mySelect.selected(); + background(c); + } + +
+ +
+ + // Hold CTRL to select multiple options on Windows and Linux. + // Hold CMD to select multiple options on macOS. + let mySelect; + + function setup() { + createCanvas(100, 100); + + // Create a dropdown and allow multiple selections. + // Place it beneath the canvas. + mySelect = createSelect(true); + mySelect.position(0, 100); + + // Add color options. + mySelect.option('red'); + mySelect.option('green'); + mySelect.option('blue'); + mySelect.option('yellow'); + + describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.'); + } + + function draw() { + background(200); + + // Use the selected value(s) to draw circles. + let colors = mySelect.selected(); + for (let i = 0; i < colors.length; i += 1) { + // Calculate the x-coordinate. + let x = 10 + i * 20; + + // Access the color. + let c = colors[i]; + + // Draw the circle. + fill(c); + circle(x, 50, 20); + } + } + +
+class: p5 +return: + description: 新的p5.Element对象。 + type: p5.Element +overloads: + - line: 1158 + params: + - name: multiple + description: | +

支持多选。

+ type: 布尔 + optional: true + return: + description: 新的p5.Element对象。 + type: p5.Element + - line: 1323 + params: + - name: existing + description: > +

要包装的现有select元素，可以是p5.Element或 + HTMLSelectElement。

+ type: 对象 + return: + description: '' + type: p5.Element +chainable: false +--- + + +# createSelect diff --git a/src/content/reference/zh-Hans/p5/createSlider.mdx b/src/content/reference/zh-Hans/p5/createSlider.mdx new file mode 100644 index 0000000000..83c7e40c86 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/createSlider.mdx @@ -0,0 +1,145 @@ +--- +title: createSlider +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

创建一个滑块<input></input>元素。

+ +

范围滑块对于快速从给定范围选择数字很有用。

+ +

前两个参数，min和max，是设置滑块最小值和最大值的数字。

+ +

第三个参数，value，是可选的。它是一个数字，设置滑块的默认值。

+ +

第四个参数，step，也是可选的。它是一个数字，设置滑块范围内每个值的间隔。将step设置为0允许滑块从min平滑移动到max。

+line: 788 +isConstructor: false +itemtype: method +example: + - |- + +
+ + let slider; + + function setup() { + createCanvas(100, 100); + + // Create a slider and place it at the top of the canvas. + slider = createSlider(0, 255); + slider.position(10, 10); + slider.size(80); + + describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.'); + } + + function draw() { + // Use the slider as a grayscale value. + let g = slider.value(); + background(g); + } + +
+ +
+ + let slider; + + function setup() { + createCanvas(100, 100); + + // Create a slider and place it at the top of the canvas. + // Set its default value to 0. + slider = createSlider(0, 255, 0); + slider.position(10, 10); + slider.size(80); + + describe('A black square with a range slider at the top. The square changes color when the slider is moved.'); + } + + function draw() { + // Use the slider as a grayscale value. + let g = slider.value(); + background(g); + } + +
+ +
+ + let slider; + + function setup() { + createCanvas(100, 100); + + // Create a slider and place it at the top of the canvas. + // Set its default value to 0. + // Set its step size to 50. + slider = createSlider(0, 255, 0, 50); + slider.position(10, 10); + slider.size(80); + + describe('A black square with a range slider at the top. The square changes color when the slider is moved.'); + } + + function draw() { + // Use the slider as a grayscale value. + let g = slider.value(); + background(g); + } + +
+ +
+ + let slider; + + function setup() { + createCanvas(100, 100); + + // Create a slider and place it at the top of the canvas. + // Set its default value to 0. + // Set its step size to 0 so that it moves smoothly. + slider = createSlider(0, 255, 0, 0); + slider.position(10, 10); + slider.size(80); + + describe('A black square with a range slider at the top. The square changes color when the slider is moved.'); + } + + function draw() { + // Use the slider as a grayscale value. + let g = slider.value(); + background(g); + } + +
+class: p5 +params: + - name: min + description: | +

滑块的最小值。

+ type: 数字 + - name: max + description: | +

滑块的最大值。

+ type: 数字 + - name: value + description: | +

滑块的默认值。

+ type: 数字 + optional: true + - name: step + description: | +

滑块范围内每一步的大小。

+ type: 数字 + optional: true +return: + description: 新的p5.Element对象。 + type: p5.Element +chainable: false +--- + + +# createSlider diff --git a/src/content/reference/zh-Hans/p5/removeElements.mdx b/src/content/reference/zh-Hans/p5/removeElements.mdx new file mode 100644 index 0000000000..7c4c3db3f3 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/removeElements.mdx @@ -0,0 +1,74 @@ +--- +title: removeElements +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

移除由p5.js创建的所有元素，包括任何事件处理程序。

+

有两个例外：通过createCanvas()创建的画布元素和通过createGraphics()创建的p5.Render对象。

+line: 255 +isConstructor: false +itemtype: method +example: + - |- + +
+ + function setup() { + createCanvas(100, 100); + + background(200); + + // Create a paragraph element and place + // it in the middle of the canvas. + let p = createP('p5*js'); + p.position(25, 25); + + describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.'); + } + + // Remove all elements when the mouse is pressed. + function mousePressed() { + removeElements(); + } + +
+ +
+ + let slider; + + function setup() { + createCanvas(100, 100); + + // Create a paragraph element and place + // it at the top of the canvas. + let p = createP('p5*js'); + p.position(25, 25); + + // Create a slider element and place it + // beneath the canvas. + slider = createSlider(0, 255, 200); + slider.position(0, 100); + + describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.'); + } + + function draw() { + // Use the slider value to change the background color. + let g = slider.value(); + background(g); + } + + // Remove all elements when the mouse is double-clicked. + function doubleClicked() { + removeElements(); + } + +
+class: p5 +chainable: false +--- + + +# removeElements diff --git a/src/content/reference/zh-Hans/p5/select.mdx b/src/content/reference/zh-Hans/p5/select.mdx new file mode 100644 index 0000000000..56f822f4eb --- /dev/null +++ b/src/content/reference/zh-Hans/p5/select.mdx @@ -0,0 +1,92 @@ +--- +title: select +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

在页面中搜索第一个与给定的CSS 选择器字符串匹配的元素。

+ +

选择器字符串可以是 ID、类、标签名或它们的组合。select()如果找到匹配项，则返回一个p5.Element对象；如果没有找到，则返回null。

+ +

第二个参数container是可选的。它指定了一个要在其中搜索的容器。container可以是 CSS 选择器字符串，一个p5.Element对象，或一个HTMLElement对象。

+line: 21 +isConstructor: false +itemtype: method +example: + - |- + +
+ + function setup() { + createCanvas(100, 100); + background(200); + + // Select the canvas by its tag. + let cnv = select('canvas'); + cnv.style('border', '5px deeppink dashed'); + + describe('A gray square with a dashed pink border.'); + } + +
+ +
+ + function setup() { + let cnv = createCanvas(100, 100); + + // Add a class attribute to the canvas. + cnv.class('pinkborder'); + + background(200); + + // Select the canvas by its class. + cnv = select('.pinkborder'); + + // Style its border. + cnv.style('border', '5px deeppink dashed'); + + describe('A gray square with a dashed pink border.'); + } + +
+ +
+ + function setup() { + let cnv = createCanvas(100, 100); + + // Set the canvas' ID. + cnv.id('mycanvas'); + + background(200); + + // Select the canvas by its ID. + cnv = select('#mycanvas'); + + // Style its border. + cnv.style('border', '5px deeppink dashed'); + + describe('A gray square with a dashed pink border.'); + } + +
+class: p5 +params: + - name: selectors + description: | +

要搜索的元素的 CSS 选择器字符串。

+ type: 字符串 + - name: container + description: | +

CSS 选择器字符串，p5.Element，或HTMLElement以在其内部搜索。

+ type: 字符串|p5.Element|HTMLElement + optional: true +return: + description: 包含元素的p5.Element。 + type: p5.Element|null +chainable: false +--- + + +# select diff --git a/src/content/reference/zh-Hans/p5/selectAll.mdx b/src/content/reference/zh-Hans/p5/selectAll.mdx new file mode 100644 index 0000000000..7130523888 --- /dev/null +++ b/src/content/reference/zh-Hans/p5/selectAll.mdx @@ -0,0 +1,99 @@ +--- +title: selectAll +module: 文档对象模型 +submodule: 文档对象模型 +file: src/dom/dom.js +description: > +

在页面中搜索所有与给定的CSS选择器字符串匹配的元素。

+ +

选择器字符串可以是ID、类、标签名或它们的组合。selectAll()如果找到任何匹配项，则返回一个p5.Element对象的数组；如果没有找到，则返回一个空数组。

+ +

第二个参数container是可选的。它指定了一个要在其中搜索的容器。container可以是CSS选择器字符串、一个p5.Element对象，或一个HTMLElement对象。

+line: 109 +isConstructor: false +itemtype: method +example: + - |- + +
+ + function setup() { + createCanvas(100, 100); + + // Create three buttons. + createButton('1'); + createButton('2'); + createButton('3'); + + // Select the buttons by their tag. + let buttons = selectAll('button'); + + // Position the buttons. + for (let i = 0; i < 3; i += 1) { + buttons[i].position(0, i * 30); + } + + describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".'); + } + +
+ +
+ + function setup() { + // Create three buttons and position them. + let b1 = createButton('1'); + b1.position(0, 0); + let b2 = createButton('2'); + b2.position(0, 30); + let b3 = createButton('3'); + b3.position(0, 60); + + // Add a class attribute to each button. + b1.class('btn'); + b2.class('btn btn-pink'); + b3.class('btn'); + + // Select the buttons by their class. + let buttons = selectAll('.btn'); + let pinkButtons = selectAll('.btn-pink'); + + // Style the selected buttons. + buttons.forEach(setFont); + pinkButtons.forEach(setColor); + + describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.'); + } + + // Set a button's font to Comic Sans MS. + function setFont(btn) { + btn.style('font-family', 'Comic Sans MS'); + } + + // Set a button's background and font color. + function setColor(btn) { + btn.style('background', 'deeppink'); + btn.style('color', 'white'); + } + +
+class: p5 +params: + - name: selectors + description: | +

要搜索的元素的CSS选择器字符串。

+ type: 字符串 + - name: container + description: | +

CSS选择器字符串、p5.Element或HTMLElement，用于在其内部搜索。

+ type: 字符串|p5.Element|HTMLElement + optional: true +return: + description: >- + 包含找到的任何元素的p5.Element数组。 + type: 'p5.Element[]' +chainable: false +--- + + +# selectAll From b7ae6d6df73c48e8a79c61009915df1baf6784f2 Mon Sep 17 00:00:00 2001 From: Asuka Minato Date: Fri, 5 Apr 2024 11:59:34 +0900 Subject: [PATCH 3/3] fix format --- src/content/reference/zh-Hans/p5/createCheckbox.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/reference/zh-Hans/p5/createCheckbox.mdx b/src/content/reference/zh-Hans/p5/createCheckbox.mdx index ad0e014715..b27503b9ac 100644 --- a/src/content/reference/zh-Hans/p5/createCheckbox.mdx +++ b/src/content/reference/zh-Hans/p5/createCheckbox.mdx @@ -10,7 +10,8 @@ description: >

第一个参数，label，是可选的。它是一个字符串，用于设置显示在复选框旁边的标签。

-

第二个参数，value，也是可选的。它是一个布尔值，用于设置复选框的值。

line: 1007 +

第二个参数，value，也是可选的。它是一个布尔值，用于设置复选框的值。

+line: 1007 isConstructor: false itemtype: method example: