FabricJS 在mac机器上对Canvas调整大小屏幕会闪烁
我的HTML代码:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Ionic App</title>
        <!--script type="text/javascript" language='javascript' src="fabric.js"></script-->
        <script type="text/javascript" language='javascript' src="index.js"></script>
        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
                margin-top: 0px;
                margin-bottom: 0px;
                margin-left: 0px;
                margin-right: 0px;
            }
            #left {
                float: left;
                width: 20%;
                height: 100%;
                border: 0px solid red;
                padding: 0px;
                margin: 0px;
            }
            #center {
                float: left;
                width: 80%;
                height: 100%;
                border: 0px solid green;
            }
            #canvasWrapper {
                overflow: scroll;
                background: #FFFFFF;
            }
            #canvas{
                border: 0px solid black;
            }
        </style>
    </head>
    <body id='body'>
        <div id='left'>
            <button onclick="init()">Init Canvas</button>
            <input type="file" onchange="chooseImage(event)"/><br/>
            <button onclick="zoomIn()">Zoom In</button>
            <button onclick="zoomOut()">Zoom Out</button><br/>
        </div>
        <div id='center'>
            <div id='canvasWrapper' tabIndex='0'>
                <canvas id="canvas" ></canvas>
            </div>
        </div>
    </body>
</html>

index.js代码:
/*! index.js 使用FabricJS对钡条逻辑封装的*/
              // 0  1    2  3    4     5  6    7     8    9    10
var zoomArray = [0.33, 0.4, 0.5, 0.66, 0.8, 1, 1.25, 1.5, 2, 2.5, 3];    //缩放的比例,都是对称的
var zoomIndex = 5;              //当前的zoomIndex

var canvasWrapper = null;       //Canvas的包裹物,当外部的window大小变化时候需要对它的宽度和高度设置
var canvas = null;              //Canvas
var fCanvas = null;             //中间的Fabric.Canvas

var backgroundBase64 = null;
var backgroundImage = null;     //背景fabric.Image
var backgroundImageWidth = 0    //Canvas的宽度,由图片的宽度决定
var backgroundImageHeight = 0;  //Canvas的高度,由图片的高度决定

//Canvas的属性
var canvasAttrs = {
    imageSmoothingEnabled: false,
    enableRetinaScaling: false,
    stopContextMenu: true,          //Menu禁用
    fireLeftClick: true,            //左按键启用
    fireMiddleClick: true,          //滚动键启用
    fireRightClick: false,          //右按键禁用
    //selectionColor: '#CC00FF',    //selection的颜色
    selectionLineWidth: 2,          //selection的线宽
    selection: true,                //selection启动
    selectionBorderColor: '#FFFF00',//selection边框颜色
    selectionFullyContained: true,  //只有当selection全部包含Canvas.Object的时候才会被选中
    selectionKey: 'ctrlKey'         //使用ctrlKey进行多选
};
//图片属性,中间Canvas的背景图和坐下那个图
var imageAttrs = {
    left: 0,
    top: 0,
    selectable: false,          //设置不能被选中,这样就可以作为背景图了
    hoverCursor: "default",     //设置它的鼠标形状
    crossOrigin: 'Anonymous'
};

/*!
 * OK选择文件
 */
function chooseImage(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function(event) {
        var imgBase64 = event.target.result;
        backgroundBase64 = imgBase64;

        //构造数据
        var data = {};
        var dataMap = {};
        data['partitions'] = [];
        data['items'] = [];
        data['filters'] = {};
        dataMap['data'] = data;
        dataMap["base64"] = backgroundBase64;

        loadData(dataMap);
    }
    reader.readAsDataURL(file)
}

/*!
 * OK这是上来执行的函数
 */
function init() {
    __initFilterBackend();
    __initCanvasWrapper();
    __initCanvas();
}

function loadData(dataMap) {
    if (dataMap == null) return;

    //图片的Base64编码。这个值肯定是有的
    backgroundBase64 = dataMap['base64'];
    //加载背景图
    fabric.util.loadImage(backgroundBase64, function(img) {
        //背景图
        backgroundImage = new fabric.Image(img, imageAttrs);
        backgroundImageWidth = backgroundImage.width;
        backgroundImageHeight = backgroundImage.height;
        fCanvas.setWidth(backgroundImageWidth);
        fCanvas.setHeight(backgroundImageHeight);
        fCanvas.add(backgroundImage);
    });
}

/*!
 * OK放大按钮触发
 */
function zoomIn() {
    var oldZoom = zoomArray[zoomIndex];

    ++zoomIndex;
    if (zoomIndex > (zoomArray.length - 1)) {
        zoomIndex = (zoomArray.length - 1);
        //直接return掉,因为zoomIndex > (zoomArray.length - 1)说明之前的zoomIndex已经是数组最后一个了
        return;
    }

    __zoom(oldZoom);
}

/*!
 * OK缩小按钮触发
 */
function zoomOut() {
    var oldZoom = zoomArray[zoomIndex];

    --zoomIndex;
    if (zoomIndex < 0) {
        zoomIndex = 0;
        //直接return掉,因为zoomIndex < 0说明之前的zoomIndex已经是0了
        return;
    }
    __zoom(oldZoom);
}

/*!
 * OK初始化Filter后端。使用Canvas2dFilterBackend,因为如果用new fabric.WebglFilterBackend()会报错
 */
function __initFilterBackend() {
    fabric.filterBackend = new fabric.Canvas2dFilterBackend();
}

/*!
 * OK初始化CanvasWrapper
 */
function __initCanvasWrapper() {
    //如果已经初始话好了就直接return
    if (canvasWrapper != null) return;

    var centerDiv = window.document.getElementById('center');
    var width = centerDiv.offsetWidth;
    var height = centerDiv.offsetHeight;

    canvasWrapper = window.document.getElementById('canvasWrapper');
    //这里通过style的width和height里设置加上px,并且这里我不设置style的maxWidth和maxHeight
    //因为如果设置了maxWidth和maxHeight后当我们对里面的Canvas进行缩小的时候,如果里面的Canvas变的太小,这样
    canvasWrapper.style.width = width + 'px';
    canvasWrapper.style.height = height + 'px';
}

/*!
 * OK初始化Canvas
 */
function __initCanvas() {
    //如果已经初始化好了就直接return
    if (fCanvas != null) return;
    canvas = window.document.getElementById('canvas');

    //这里不设置宽度和高度,通过导入图片的宽高来设置
    fCanvas = new fabric.Canvas(canvas, canvasAttrs);
    //单纯设置canvas.backgroundColor内容无效,必须和下面的canvas.add一起才会起效果
    fCanvas.backgroundColor = 'black';
}

/*!
 * OK缩放的核心函数
 */
function __zoom(oldZoom) {
    //记录一开始的left和top值
    //var scrollLeft = canvasWrapper.scrollLeft;
    //var scrollTop = canvasWrapper.scrollTop;

    //以下是放大缩小操作,重新设置放大缩小的比例
    var zoom = zoomArray[zoomIndex];
    //在指定的点进行缩放
    fCanvas.setZoom(zoom);
    //!Important,加入对Canvas大小的设置,这样可以让CanvasWrapper也能进行调整
    fCanvas.setWidth(backgroundImageWidth*zoom);
    fCanvas.setHeight(backgroundImageHeight*zoom);

    //放大完后要重新设置transform
    //var vpt = fCanvas.viewportTransform;
    //console.log('-----' + vpt[4] + ' and ' + vpt[5]);
    //vpt[4] = 0;
    //vpt[5] = 0;
    //fCanvas.requestRenderAll();

    /* oldleft      newLeft
     * --------- = ---------
     * oldZoom      newZoom
     */
    //canvasWrapper.scrollLeft = (scrollLeft*zoom)/oldZoom;
    //canvasWrapper.scrollTop = (scrollTop*zoom)/oldZoom;
}
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
报错:Uncaught SyntaxError: Invalid or unexpected token,找不到原因,纠结
-
openlayers标绘lineString,边框的样式
-
HTML里为啥input和canvas元素水平放在一行没有对齐,要写一个验证码,附上代码
-
移动端canvus得到的字体点阵信息与电脑端不一致。
-
苏宁的滑块验证码的背景图片canvas是如何绘制出来的。。。
-
Android 自定义View 中如何 再new 一个Canvas
-
fileObj = document.getElementById("file").files[0]; 我想直接把地址给这个变量
-
vue中用html2canvas转换图片 图片不完整 或有偏移 有空白区域
-
想要分析图片上每个颜色段的纵向长度,并分别列出颜色的对应代码和长度 求问如何做到,或者有类似的程序能实现相同的功能吗?
-
C++ Windows API 发送鼠标点击消息问题
-
试图清除 Android SurfaceView/Canvas 时闪烁
-
html2canvas+Canvas2Image在移动端出现的问题
-
java后台将base64字符串转换为PDF后生成的PDF打不开怎么回事呀
-
怎么把js函数的参数变成全局变量,用到后面的函数中运算
-
使用html2canvas网页截图,页面元素中如果包含canvas标签的话,canvas部分无法截取!!
-
Canvas如何自适应浏览器的大小
-
onClick没有定义,有大佬知道怎么办吗,卡了好几天了
-
在WPF中Canvas 绘制图形的平移、缩放
-
canvas实时视频捕获,在safari等浏览器不支持,有没有替代方案?
-
程序员竟然钟爱这个!我 low了
今天和一帮程序员大佬群里闲聊(需要入群的可以加最底下微信哦~)聊着聊着竟然扯到鞋子一直在讨论穿什么鞋子比较耐脏然后一帮大佬集中围殴小白鞋说小白鞋虽然百搭但是太容易脏,太不...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收...
996下的程序员,该如何保证自己的身体健康?
作者:陈大鱼头github:KRISACHAN自从开始写代码之后,一天里大部分的时间都贡献了给了电脑跟那张从X总办公室里搬回来的人体工学椅了。鱼头也经历过无数次的 肥胖 ...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
全球最厉害的 14 位程序员!
来源 | ITWorld 整理自网络全球最厉害的 14 位程序员是谁?今天就让我们一起来了解一下吧,排名不分先后。01. Jon Skeet个人名望:程序技术问答网站 S...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
招人!入职阿里仅1年,我和做AI的程序员薪资翻了2倍!
最近在知乎上,关于AI的这个话题又被顶起来,其中,这条回答让人印象深刻:在这短短的一条信息里,无疑显示出:AI行业缺人,高端岗位80万年薪恐怕也招不来!小编上周在一个AI...
什么是大公司病(太形象了)
点击蓝色“五分钟学算法”关注我哟加个“星标”,天天中午 12:15,一起学算法作者 | 南之鱼来源 | 芝麻观点(chinamkt)所谓大企业病,一般都具有机构臃肿、多重...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
Spring高级技术梳理
Spring高级技术梳理 序言正文SpringDate部分Spring全家桶之SpringData——预科阶段Spring全家桶之SpringData——Spring 整合Hibernate与Hibernate JpaSpring全家桶之SpringData——Spring Data JPASpring全家桶之SpringData——SpringData RedisSpringBoot部分Sp...
Git 天天用 但是 Git 原理你了解吗?
Git 原理 做技术一定要知其然知其所以然,意思就是:知道它是这样的,更知道它为什么是这样的。我主要通过4块内容来简单介绍 Git 是原理是什么样的。这4块内容如下: Git 存储目录结构介绍 Git 是如何存储的 Git 的对象 Git引用 当然 Git 原理不仅仅包含这些,想要更深入了解请查看官方教程 https://git-scm.com/book/zh/v2/。 本文内容是我在 Git...
Android——微信自动回复实现
首先本文的测试微信版本是7.0.3 ,亲测可以使用。 需要实现-抓取微信自动回复消息的功能点。 一.首先打开DDMS,使用按钮。 在微信中回复一个消息 点击Stop Method Profiling。 二.查看生成的报表,观察到如下两个方法 其中1应该是发送消息的接口方法。2应该是UI层显示的方法。 三.首先分析第一个方法: 1.,可以看到,参数值是String,返...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
8000字干货:那些很厉害的人是怎么构建知识体系的
本文约8000字,正常阅读需要15~20分钟。读完本文可以获得如下收益: 分辨知识和知识体系的差别 理解如何用八大问发现知识的连接点; 掌握致用类知识体系的构建方法; 能够应用甜蜜区模型找到特定领域来构建知识体系。 1. 知识体系?有必要吗? 小张准备通过跑步锻炼身体,可因为之前听说过小腿变粗、膝盖受伤、猝死等等与跑步有关的意外状况,有点担心自己会掉进各种坑里,就在微信上问朋友圈一直晒跑步...
万字长文!线性代数的本质课程笔记完整合集
点击上方“Datawhale”,选择“星标”公众号第一时间获取价值内容系列目录1.向量究竟是什么https://www.bilibili.com/video/av5987...
Java 网络爬虫,就是这么的简单
这是 Java 网络爬虫系列文章的第一篇,如果你还不知道 Java 网络爬虫系列文章,请参看 学 Java 网络爬虫,需要哪些基础知识。第一篇是关于 Java 网络爬虫入门内容,在该篇中我们以采集虎扑列表新闻的新闻标题和详情页为例,需要提取的内容如下图所示: 我们需要提取图中圈出来的文字及其对应的链接,在提取的过程中,我们会使用两种方式来提取,一种是 Jsoup 的方式,另一种是 httpcli...
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件
文章目录前言一、nginx简介1. 什么是 nginx 和可以做什么事情2.Nginx 作为 web 服务器3. 正向代理4. 反向代理5. 动静分离6.动静分离二、Nginx 的安装三、 Nginx 的常用命令和配置文件四、 Nginx 配置实例 1 反向代理五、 Nginx 配置实例 2 负载均衡六、 Nginx 配置实例 3 动静分离七、 Nginx 的高可用集群 前言 一、nginx简介...
Java 爬虫遇上数据异步加载,试试这两种办法!
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题,这也是爬虫中常见的问题。 现在很多都是前后端分离项目,这会使得数据异步加载问题更加突出,所以你在爬虫时遇到这类问题不必惊讶,不必慌张。对于这类问题的解决办法总体来说有以下两种: 1、内置一个浏览器内...
Angular 入门教程系列:39:使用ng-alain进行开发
在前面的文章中介绍过ng-alain,当时在使用的时候还显得不是很方便,最简单的一个demo运行的都不是非常流畅。而目前的版本已经做有较大的改进,再这个基础上进行二次开发,尤其是一些后端的平台或者监控的平台看起来都比较不错。在这篇文章中继续来确认一下使用的感受。
相关热词 c#部署端口监听项目、 c#接口中的属性使用方法 c# 昨天 c#func链接匿名方法 c#怎么创建文件夹 c#从键盘接收空格 c#da/ad c#部门请假管理系统 c#服务器socket c# 默认的访问修饰符