英文:
Paper.js not drawing to canvas
问题
我已经设计了一个使用pywebview包功能创建的画布。在这个画布上，我尝试使用paper.js来绘制一个Path，然后将生成的HTML输出到图像弹出窗口。Path没有在页面上呈现，尽管相同的代码似乎在交互式代码段测试器上Paper.js网站上可以工作。以下是我的代码：
import io
from PIL import Image
import base64
import webview
def extract_image(width, height, path=[(100, 100)]):
color = 'red'
def callback(window):
window.html = f"""
<script type="text/javascript" src="js/paper.js"></script>
<canvas id="myCanvas" width="{width}" height="{height}"></canvas>
"""
js_code = f"""
var canvas = document.getElementById("myCanvas");
paper.setup(canvas);
var start = new paper.Point({path[0][0]}, {path[0][1]});
var end = new paper.Point({path[0][0] + 1}, {path[0][1]});
var path = new paper.Path({
segments: [start, end],
strokeColor: '{color}',
strokeCap: 'round',
strokeJoin: 'round',
strokeWidth: 10
});
path.add(new paper.Point(200, 200));
paper.project.activeLayer.addChild(path);
paper.view.draw();
"""
print(js_code)
print(window.evaluate_js(js_code))
data_url = window.evaluate_js("canvas.toDataURL()")
print(f"data url is: {data_url}")
# 从数据URL中提取base64编码的图像数据
base64_data = data_url.split(",")[1]
# 解码base64数据并从中创建PIL图像
image_data = io.BytesIO(base64.b64decode(base64_data))
image = Image.open(image_data)
# 显示图像
image.show()
window.destroy()
return callback
def extract_canvas_to_image():
return webview.create_window('Hello world', frameless=True, hidden=True)
if __name__ == '__main__':
window = extract_canvas_to_image()
webview.start(extract_image(400, 400), window)
如何使我的Path正确呈现？
英文:
I have designed a canvas that is created with functionality from the pywebview package. On this canvas, I attempt to use paper.js to draw a Path, then output the resulting rendered HTML to an image popup. The Path does not render on the page, although the same code seems to work on an interactive snippet tester on the Paper.js website. This is my code so far:
import io
from PIL import Image
import base64
import webview
def extract_image(width, height, path=[(100, 100)]):
color = 'red'
def callback(window):
window.html = f"""
<script type="text/javascript" src="js/paper.js"></script>
<canvas id="myCanvas" width="{width}" height="{height}"></canvas>
"""
js_code = f"""
var canvas = document.getElementById("myCanvas")
paper.setup(canvas)
var start = new paper.Point({path[0][0]}, {path[0][1]})
var end = new paper.Point({path[0][0] + 1}, {path[0][1]})
var path = new paper.Path({{
segments: [start, end],
strokeColor: '{color}',
strokeCap: 'round',
strokeJoin: 'round',
strokeWidth: 10
}})
path.add(new paper.Point(200, 200))
paper.project.activeLayer.addChild(path)
paper.view.draw()
"""
print(js_code)
print(window.evaluate_js(js_code))
data_url = window.evaluate_js("canvas.toDataURL()")
print(f"data url is: {data_url}")
# Extract the base64 encoded image data from the data URL
base64_data = data_url.split(",")[1]
# Decode the base64 data and create a PIL image from it
image_data = io.BytesIO(base64.b64decode(base64_data))
image = Image.open(image_data)
# Display the image
image.show()
window.destroy()
return callback
def extract_canvas_to_image():
return webview.create_window('Hello world', frameless=True, hidden=True)
if __name__ == '__main__':
window = extract_canvas_to_image()
webview.start(extract_image(400, 400), window)
How can I get my Path to render properly?
答案1
得分: 1
或许你应该使用CDN加载paper.js：
将以下代码更改为：
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.min.js"></script>
英文:
maybe you should load paper.js with a cdn:
change:
<script type="text/javascript" src="js/paper.js"></script>
to:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.min.js"></script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论