Question

我正在使用R Shiny开发网页，并且还包含我自己的R代码。

我正在使用p5.js（https://p5js.org/）在网页上显示游戏。

正如在官方网页上说我有一个HTML和p5 javascript代码以及javascript库。如果我运行HTML，即单击右键并按chrome显示我得到的开始示例（https://p5js.org/get-started/）没有发生。

这是HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
  <script language="javascript" type="text/javascript" src="libraries/p5.js">    </script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <!-- this line removes any default padding and style. you might only need one of these values set. -->
  <style> body {padding: 0; margin: 0;} </style>
</head>
<body>

</body>
</html>

当我在Shiny中执行相同操作时，从R-Studio运行代码我没有得到任何东西。我已经将javascript文件存储在www文件夹中，因为它应该是，我现在知道我的HTML称为javascript，因为我在p5 javascript文件中设置了警报，但在设置和绘制方法之外。问题是，即使加载了警报，似乎没有调用setup和draw方法，显然，因此，它们不会加载画布。我知道它们没有被调用，因为我在setup方法中调用了一个警报，它可以直接运行HTML文件但是如果我从R-Studio运行相同的文件则没有。

这是p5 javascript代码：

alert("GOOD1");

function setup() {
  alert("GOOD2");
  createCanvas(640, 480);
}

function draw() {
  if (mouseIsPressed) {fill(0);} 
  else {fill(255);}
  ellipse(mouseX, mouseY, 80, 80);
}

我使用下一行代码

在Shiny中加载HTML页面

... ,tabItem(tabName = "tabProcessing", htmlOutput("processingMasterThesis") ...

附加到标签＆＃34; processingMasterThesis＆＃34;我有相应的URL到server.R中的HTML文件，因为它应该是这样的问题不在这里。

为什么可能是这个原因？如果我直接调用HTML文件在浏览器中加载，但是如果我从R-Studio中调用HTML文件，那么它有效吗？

Answer 1

我已经解决了这个问题。 p5 java脚本代码将是：

// =====================
// "app/sketch.js"
// =====================
var myCanvas;

function setup() {
  var idCanvas = 'divCanvas';
  myCanvas = createCanvas(300, 300);
  myCanvas.parent(idCanvas);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

您可以在https://p5js.org/

找到运行该示例所需的库

在这个javascript文件中，我创建了一个引用html div元素的id，这是我将设置画布的地方。完成此操作后，其余的javascript代码将完美编码。关键是要引用画布的父级是div，你可以在代码中看到。

在此之后，您只需创建闪亮或纯HTML代码，如下所示：

# THE UI (File ui.R)
library(shiny)
library(shinydashboard)
library(rmarkdown)

shinyUI(
fluidRow(
  # THE UI
  tags$html(
    tags$body(
    singleton(tags$head(tags$script(src = "master_thesis/app/libraries/p5.js")))
    ,singleton(tags$head(tags$script(src = "master_thesis/app/sketch.js")))
    ,singleton(tags$div(id = 'divCanvas', style = 'width:auto; height:auto'))
))
)
)

我在下面显示的代码是闪亮的。第一个＆＃34;头＆＃34;行包括库p5.js和第二个＆＃34; head＆＃34;只是说＆＃34;嘿，这是我的p5脚本文件＆＃34;和＆＃34; divCanvas将是我将打印的div＆＃34;。

您可能对javascript文件的引用有问题。我认为值得注意的是，您必须在根闪亮应用程序中创建一个www文件夹。在此文件夹中，您必须放置您的javascript文件。例如，正如您在我的代码中看到的那样，我使用的两个javascript文件遵循下一个路径：

ShinyApplication/www/app/libraries/p5.js
ShinyApplication/www/app/sketch.js

希望这有帮助！

R Shiny和p5.js

1 个答案: