��权限没有,则隐藏 function forum_list_access_filter($forumlist, $gid, $allow = 'allowread') { global $grouplist; if (empty($forumlist)) return array(); if (1 == $gid) return $forumlist; $forumlist_filter = $forumlist; $group = $grouplist[$gid]; foreach ($forumlist_filter as $fid => $forum) { if (empty($forum['accesson']) && empty($group[$allow]) || !empty($forum['accesson']) && empty($forum['accesslist'][$gid][$allow])) { unset($forumlist_filter[$fid]); } unset($forumlist_filter[$fid]['accesslist']); } return $forumlist_filter; } function forum_filter_moduid($moduids) { $moduids = trim($moduids); if (empty($moduids)) return ''; $arr = explode(',', $moduids); $r = array(); foreach ($arr as $_uid) { $_uid = intval($_uid); $_user = user_read($_uid); if (empty($_user)) continue; if ($_user['gid'] > 4) continue; $r[] = $_uid; } return implode(',', $r); } function forum_safe_info($forum) { //unset($forum['moduids']); return $forum; } function forum_filter($forumlist) { foreach ($forumlist as &$val) { unset($val['brief'], $val['announcement'], $val['seo_title'], $val['seo_keywords'], $val['create_date_fmt'], $val['icon_url'], $val['modlist']); } return $forumlist; } function forum_format_url($forum) { global $conf; if (0 == $forum['category']) { // 列表URL $url = url('list-' . $forum['fid'], '', FALSE); } elseif (1 == $forum['category']) { // 频道 $url = url('category-' . $forum['fid'], '', FALSE); } elseif (2 == $forum['category']) { // 单页 $url = url('read-' . trim($forum['brief']), '', FALSE); } if ($conf['url_rewrite_on'] > 1 && $forum['well_alias']) { if (0 == $forum['category'] || 1 == $forum['category']) { $url = url($forum['well_alias'], '', FALSE); } elseif (2 == $forum['category']) { // 单页 $url = ($forum['threads'] && $forum['brief']) ? url($forum['well_alias'] . '-' . trim($forum['brief']), '', FALSE) : url($forum['well_alias'], '', FALSE); } } return $url; } function well_forum_alias() { $forumlist = forum_list_cache(); if (empty($forumlist)) return ''; $key = 'forum-alias'; static $cache = array(); if (isset($cache[$key])) return $cache[$key]; $cache[$key] = array(); foreach ($forumlist as $val) { if ($val['well_alias']) $cache[$key][$val['fid']] = $val['well_alias']; } return array_flip($cache[$key]); } function well_forum_alias_cache() { global $conf; $key = 'forum-alias-cache'; static $cache = array(); // 用静态变量只能在当前 request 生命周期缓存,跨进程需要再加一层缓存:redis/memcached/xcache/apc if (isset($cache[$key])) return $cache[$key]; if ('mysql' == $conf['cache']['type']) { $arr = well_forum_alias(); } else { $arr = cache_get($key); if (NULL === $arr) { $arr = well_forum_alias(); !empty($arr) AND cache_set($key, $arr); } } $cache[$key] = empty($arr) ? '' : $arr; return $cache[$key]; } ?>javascript - Reveal image on canvas with drawstrokespaint - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Reveal image on canvas with drawstrokespaint - Stack Overflow

programmeradmin5浏览0评论

I want to achive the following:

  1. Draw a bg-image to the canvas (once or if needed repeatedly)
  2. The image should not be visible at the beginning
  3. While i "paint" shapes to the canvas the bg-image should get visible where the shapes were drawn

The parts of the image that will be revealed shall be "painted" (like with a brush) so i want to use strokes.

What i tried: - Do not clear the canvas - Paint rects to the canvas with globalCompositeOperation = 'destination-in' This works, the rectangles reveal the image but i need strokes

If i use strokes they are ignored with 'destination-in' while i see them with normal globalCompositeOperation.

Is this intended that the strokes are ignored? Is there a workaround like somehow converting the stroke/shape to a bitmap? Or do i have have to use two canvas elements?

In OpenGL i would first draw the image with its rgb values and with a = 0 and then only "paint" the alpha in.

I want to achive the following:

  1. Draw a bg-image to the canvas (once or if needed repeatedly)
  2. The image should not be visible at the beginning
  3. While i "paint" shapes to the canvas the bg-image should get visible where the shapes were drawn

The parts of the image that will be revealed shall be "painted" (like with a brush) so i want to use strokes.

What i tried: - Do not clear the canvas - Paint rects to the canvas with globalCompositeOperation = 'destination-in' This works, the rectangles reveal the image but i need strokes

If i use strokes they are ignored with 'destination-in' while i see them with normal globalCompositeOperation.

Is this intended that the strokes are ignored? Is there a workaround like somehow converting the stroke/shape to a bitmap? Or do i have have to use two canvas elements?

In OpenGL i would first draw the image with its rgb values and with a = 0 and then only "paint" the alpha in.

Share Improve this question asked Dec 10, 2014 at 17:55 AlexAlex 5516 silver badges19 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

You can solve it by these steps:

  • Set the image as a pattern
  • Set the pattern as fillStyle or strokeStyle

When you now fill/stroke your shapes the image will be revealed. Just make sure the initial image fits the area you want to reveal.

Example showing the principle, you should be able to adopt this to your needs:

var ctx = canvas.getContext("2d"),
    img = new Image,
    radius = 40;

img.onload = setup;
img.src = "http://i.imgur./bnAEEXq.jpg";

function setup() {
  
  // set image as pattern for fillStyle
  ctx.fillStyle = ctx.createPattern(this, "no-repeat");
  
  // for demo only, reveals image while mousing over canvas
  canvas.onmousemove = function(e) {
    var r = this.getBoundingClientRect(),
        x = e.clientX - r.left,
        y = e.clientY - r.top;
    
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.arc(x, y, radius, 0, 2*Math.PI);
    ctx.fill();
  };
}
<canvas id=canvas width=900 height=600></canvas>

Hope this helps!

Alternative solution:

  1. Put the image as a normal image on your website
  2. add a canvas and use CSS positioning to place it right above the image
  3. Fill the canvas with the color you use as the page background
  4. have your paint tools erase the canvas when you draw. By the way, you can set context.globalCompositionOperation = 'destination-out' to turn all drawing operations into an eraser.

Here is an example. As you can see, the alpha properties of your tools are respected.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

//prepare canvas
ctx.fillStyle = '#ffffff'
ctx.fillRect(0, 0, 120, 120);

//prepare a 30% opacity eraser
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';

// make random strokes around cursor while mouse moves
canvas.onmousemove = function(e) {
   var rect = this.getBoundingClientRect();
   var x = e.clientX - rect.left;
   var y = e.clientY - rect.top;

   ctx.beginPath();
   ctx.moveTo(x + Math.random() * 33 - 16, y + Math.random() * 33 - 16);
   ctx.lineTo(x + Math.random() * 33 - 16, y + Math.random() * 33 - 16);
   ctx.stroke();

}
<span>Move your mouse:</span>
<div>
<img src='https://upload.wikimedia/wikipedia/mons/thumb/6/61/HTML5_logo_and_wordmark.svg/120px-HTML5_logo_and_wordmark.svg.png' style='position:absolute'>
<canvas id='canvas' width=120 height=120 style='position:absolute'></canvas>
</div>

发布评论

评论列表(0)

  1. 暂无评论