PaintingStoner:Webapp,用于优化投影仪引导的绘画

  • b0_609761
    了解作者
  • 87KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-08 01:10
    上传日期
绘画斯托纳 (请注意,实际上,衰落动画要比每秒4帧gif平滑得多。) 绘画Stoner是一个基于浏览器的简单工具,用于优化投影仪引导的绘画。 即,当您使用现实投影仪在现实画布上投影数字图像以进行现实绘画时,无论您是使用投影来绘制粗略草图,学习透视图还是尝试绘制投影图像。 在购买价值50美元的投影仪以更准确地绘制初始透视图后,我出于个人目的开发了此工具。 所有功能都是围绕廉价投影机的缺点构建的,否则将大大简化该过程的许多方面。 绘画斯托纳的力量在于三个主要特征: 图片的自由透视变换。 这使您可以将图像梯形失真校正到画布上,而不管投影机的位置或它具有什么样的梯形失真功能。 提供了一些可选准则,以实现更准确的定位。 具有动画自动淡入淡出功能的扩展不透明度控制。 除了基本的不透明度滑块外,Stoner还包括一个不透明度范围滑块,您可以在其中选择两个不透明度值。 您可以根据需要通过单击页
PaintingStoner-master.zip
  • PaintingStoner-master
  • favicon.png
    13.8KB
  • gmic.php
    4.4KB
  • stoner.less
    7KB
  • psgrid.png
    78.4KB
  • stoner.js
    22.3KB
  • index.html
    6.1KB
  • LICENSE.md
    1KB
  • CHANGELOG.md
    1.1KB
  • README.md
    4.5KB
  • persform.js
    3.7KB
内容介绍
# Painting Stoner ![Painting Stoner in action](https://storage.googleapis.com/olaviinha/github/ps-4fps.gif) (Note that the fading animation is much smoother in reality than in this 4 frames per second gif.) --- Painting Stoner is a simple browser-based tool for optimizing projector guided painting. I.e. when you use a real-life projector to project a digital image on your real-life canvas for real-life painting, whether you use projecting for making a rough sketch, learning perspectives or even attempting to paint the projected image. I developed this tool for my own purposes after purchasing a $50 projector for sketching initial perspectives more accurately. All features are built around that cheap-ass projector's shortcomings as well as otherwise making many aspects of the process significantly more convenient. Painting Stoner's power lies in three key features: 1. **Free perspective transformation of image.** This enables you to keystone the image to your canvas despite the projector position or what kind of keystoning features it has. Optional guidelines are present for more accurate positioning. 2. **Extended opacity control with animated auto-fading.** In addition to basic opacity slider, the Stoner includes an opacity range slider where you can select two opacity values. You can easily switch between these values when necessary by clicking anywhere on page or hitting spacebar on your keyboard. You may also enable animated auto-fading between these opacity values according to duration settings (separately specified image fade time, image on-screen time and image off-screen time). This way you will see both the end result without projection and the overlaying projection on regular (fast or slow) intervals while you paint. Additionally you may adjust cursor size and hide any small portion of the projection by cursor. 3. **Multiple relevant image adjustment controls** to get the projected image closer to what best suits your needs at any moment. Controls include projection backlight, grayscale, invert colours, threshold, contrast and brightness. With optional [backend setup](#setup), you can get a few more controls based on server-side image processing: details, posterize,vectorize and outlines. Tested only in [Google Chrome](https://chrome.google.com). ![Painting Stoner in action](https://storage.googleapis.com/olaviinha/github/painting-stoner/backendadjs2.gif) Painting Stoner in action. ## Online demo Demo has no backend support, but is otherwise fully functional. https://inha.asia/dmo/painting-stoner ## How to use 1. Set up your projector to project on your canvas. Remember that this tool has excessive keystoning, so you may place your projector in a position where you normally might not – The Stoner will make up for any possible shortcomings in your projector's keystoning features. 2. Open [Painting Stoner](https://inha.asia/dmo/painting-stoner). 3. Drag any image file from your computer and drop it in the yellow square (yellow square will appear on page when you drag your file on the page). Alternatively you may directly paste an image or an image URL from your clipboard. 4. Click on the <i>Full screen</i> button to enter full screen mode. 5. Drag the big red corner dots to get the image on your canvas as you wish. Easiest way to go is to crop your image to the same aspect ratio as your canvas (using some other tools) – in this case you will simply drag the big red dots onto the corners of you canvas and you're done. 6. Adjust image and opacity settings to whatever you find most convenient for the situation at hand. 7. Start painting. ## Setup ### ...without backend support: Place all the files of this repository on a server and you're done. ### ...with backend support: Place all the files of this repository on a server and install the prerequisites. Backend support will provide a few additional controls based on server-side image processing. #### Prerequisites - PHP - Gimp-G'MIC - G'MIC #### Example installation Installation procedure depends on your server setup, but for Apache2 running on Ubuntu, it should go _something like this_: ``` # Install PHP sudo apt install php libapache2-mod-php ``` ``` # Install Gimp-G'MIC & G'MIC: sudo apt install gimp-gmic gmic ``` ``` # Restart Apache sudo service apache2 restart ``` ``` # Grant PHP write permission to tmp dir (used to store processed images temporarily) sudo chown -R www-data:www-data /var/www/WHATEVER-PATH-TO/painting-stoner/tmp ``` Lastly, open `stoner.js` in a text editor and change `var gmicSupport` to `true`: ``` var gmicSupport = true; ```
评论
    相关推荐
    • 购物车动画
      将商品动画形式加入购物车,当商品进入购物车时,购物车有上下抖动效果,商品数量渐变。
    • 动画星球
      动画星球
    • SWiSHmax动画
      SWiSHmax动画制作软件,很容易上手的动画制作软件。
    • 动画
      动画化 参考
    • 动画
      动画
    • 动画脉冲
      动画脉冲 网站链接: :
    • 动画
      动画
    • CATransition动画
      CATransition动画,一些CATransition的简单运用,非常简单的运用
    • Cmaera动画
      刻相机镜头动画,插件,好用的很,有问题加我
    • Powerpoint动画
      PowerPoint制作的动画,PPS文件,后缀名更改为PPT即可编辑。