使用 Canvas 中的交互式帖子
Posted
技术标签:
【中文标题】使用 Canvas 中的交互式帖子【英文标题】:Using Interactive Posts from Canvas 【发布时间】:2013-07-03 04:11:49 【问题描述】:我正在尝试在画布元素中实现 Google+ 功能 -
是否可以在不使用 gapi.interactivepost.render() 的情况下请求交互式帖子弹出窗口?
同样,有没有办法从 JS 触发 gapi.auth.authorize() 并将其视为用户操作? (从直接点击链接/按钮可以看出)。
【问题讨论】:
【参考方案1】:您无法在画布内呈现 Google+ 按钮,但您可以在 html 画布上放置一个 div 并在画布上呈现按钮。例如:
画布和按钮目标的 HTML
<p>
<div id="canvasPlus" style="position:relative">
<canvas id="canvas" ></canvas>
<div style = "position:absolute; top:20px; left:230px;" id="shareContainer">
<button id="ipost">Share</button>
</div>
</div>
</p>
用于在画布上呈现按钮的 JavaScript
<script type="text/javascript">
(function()
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://plus.google.com/js/client:plusone.js?onload=onPlusOneLoaded';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
)();
function onPlusOneLoaded()
var params =
clientid: 'YOUR_CLIENT_ID',
cookiepolicy: 'single_host_origin',
scope: 'https://www.googleapis.com/auth/plus.login',
contenturl: 'https://plus.google.com/pages/',
calltoactionurl: 'https://plus.google.com/pages/',
prefilltext: 'Hello Stack Overflow',
;
gapi.interactivepost.render('ipost', params);
drawCanvas();
function drawCanvas()
var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<25;i++)
ctx.fillStyle = "rgba(200,0,0,.5)";
ctx.fillRect (10 + 10*i, 10 + 10*i, 55, 50);
</script>
我不确定您对“视为用户操作”的要求是什么,但您可以通过 API 调用触发授权对话框,例如:
gapi.auth.authorize(
client_id: 'YOUR_CLIENT_ID',
cookiepolicy: 'single_host_origin',
scope: 'https://www.googleapis.com/auth/plus.login'
);
执行此操作时,您将无法在 android 上进行无线安装。
【讨论】:
Chrome 不允许弹出窗口,除非它们是用户操作的直接结果 - 因此按钮可以生成弹出窗口,但超时按钮不能。 交互式帖子不会在弹出窗口中呈现,而是在 HTML 容器中呈现。尝试在画布上渲染按钮,然后在您希望显示交互式帖子时适当地移动它/显示它。以上是关于使用 Canvas 中的交互式帖子的主要内容,如果未能解决你的问题,请参考以下文章
快速响应的交互式图表/图形:SVG、Canvas 还是其他?
用于交互式动画的 Java Swing 与 HTML5 Canvas
如何使用 UIActivityViewController 创建用户交互式推文或 Facebook 帖子