叶语者
叶语者

能在手机上绘制图形的canvas集合fabricjs并且可以使用双指缩放图片

在html中使用 在网上查找各种canvas js集合时，我发现关于fabric.js 大多数是在pc端的，但是我在使用fabric.js 时发现它其实也可以在移动端使用的，在移动端不仅仅可以使用图片的各种操作，其实也可以实现，想画板的各种功能.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fabric-with-gestures</title>
    <script src="./fabric-with-gestures/dist/fabric.min.js"></script>
</head>
<body>
    <div>
        <!-- 这里的案例我是根据fabric 官网改动的 可以打印状态 -->
        <p id="info" style="height:60px;width: 100%;overflow-y: scroll;"></p>
        <canvas id="c"></canvas>
    </div>
    <script>
    var canvas = new fabric.Canvas('c');
        canvas.setWidth(350)// 设置canvas的宽
        canvas.setHeight(200)// 设置canvas的高
        fabric.Image.fromURL('./2.png', function(img) {
        img.scale(0.5).set({
            left: 150,
            top: 150,
            angle: -15
        });
        canvas.add(img).setActiveObject(img);//可以在移动端用双指缩放图片
        });
        var info = document.getElementById('info');
        /* 要想触发 必须是fabric-with-gestures
        touch:gesture
        touch:drag
        touch:shake
        touch:longpress
        */
        canvas.on({
        'touch:gesture': function() {
            var text = document.createTextNode(' Gesture ');
            info.insertBefore(text, info.firstChild);
        },
        'touch:drag': function() {
            var text = document.createTextNode(' Dragging ');
            info.insertBefore(text, info.firstChild);
            console.log('drag')
        },
        'touch:orientation': function() {
            var text = document.createTextNode(' Orientation ');
            info.insertBefore(text, info.firstChild);
            console.log('orientation')
        },
        'touch:shake': function() {
            var text = document.createTextNode(' Shaking ');
            info.insertBefore(text, info.firstChild);
            console.log('shake')
        },
        /* 长按 */
        'touch:longpress': function() {
            var text = document.createTextNode(' Longpress ');
            info.insertBefore(text, info.firstChild);
            console.log('longpress')

        }
        });
    </script>
</body>
</html>

在vue 使用 fabric .js

  import { fabric } from 'fabric-with-gestures' 
  var canvas;
   export default {
         data(){
            return {
               mouseFrom:{},
               mouseTo:{},
               moveCount:1,
               drawmoving:false,
            }
        },
        mounted(){
             // 初始化canvas画布
             var _this=this;
            canvas=new fabric.Canvas(this.Id,{
                backgroundColor:'#FFF' //canvas 背景
            });
           // canvas.setZoom(2); //设置画板缩放比例
            // canvas.width=800;
            // canvas.height=800;
              // canvas事件绑定
            canvas.on({
                 //双指 操作事件
                'touch:gesture': function(e) {
                    // console.log('gesture',e)
                    // e.target.
                },
                'touch:drag': function(e) {
                  //  console.log('touch:drag',e);
                    //  var data=canvas.toJSON();//canvas 序列化
                    //  _this.addCanvaspdf(data);
                },
                // 
                'touch:orientation': function(e) {
                  console.log('orientation',e)
                },
                'touch:shake': function() {
                   console.log('shake')
                },
                // 长按
                'touch:longpress': function(e) {
                  console.log('longpress',e);
                },
                'mouse:down':(o)=>{
                        _this.mouseFrom.x=o.absolutePointer.x;// 拿到当前x 的坐标 在移动端也可以
                       _this.mouseFrom.y=o.absolutePointer.y;// 拿到当前y 的坐标 在移动端也可以
                        _this.drawmoving = true;
                         _this.directState=false;
                        console.log('dx',_this.mouseTo.x);
                        console.log('dy',_this.mouseTo.y);
                        console.log("o",o);
                },
                "mouse:up":(o)=>{
                      _this.mouseTo.x=o.absolutePointer.x;
                     _this.mouseTo.y =o.absolutePointer.y;
                    //  _this.directState=false;
                    console.log('x',_this.mouseTo.x);
                    console.log('y',_this.mouseTo.y);
                },
                "mouse:move":(m)=>{
                    if(_this.moveCount % 2 && !_this.drawmoving){
                        return;
                    }
                    _this.moveCount++;
                    _this.mouseTo.x=m.absolutePointer.x;
                    _this.mouseTo.y=m.absolutePointer.y;
                  },
                    'object:moving': (e)=> {
                         // e.target.opacity = 0.8; 设置移动是对象的透明状态
                    },
                 'object:added': (e)=>{
                   let object = e.target;
                    if(!_this.controlFlag) {
                    _this.redo = []
                    }
                    _this.controlFlag = false
                    console.log("added");
                },
                'object:modified':(e)=> {
                    // e.target.opacity = 1;
                    let object = e.target;
                },
               
            })
       },
       methods(){
        // 添加图片在canvas上
         testimg(){
               fabric.Image.fromURL(require("../assets/img/2.png"), (img) => {
                img.set({
                    left:150,//图片在canvas上坐标
                    top:150,//图片在canvas上坐标
                    originX:"center",//坐标x 作用设置图片的x轴的坐标
                    originY:"center",//坐标y  作用设置图片的y轴的坐标
                    // hasControls: false, // 是否开启图层的控件
                    //borderColor: 'orange', // 图层控件边框的颜色
                    angle:0 //图片旋转角度
                });
                // 添加对象后, 如下图
                canvas.add(img);
                // canvas.item(0).lockMovementY= true;//锁定Y轴
                //  canvas.item(0).lockMovementX= true;//锁定X轴
                 canvas.item(0).lockRotation = true;//锁定旋转
                });
            },
       
       },
       created(){
         this.testimg();
       }
        }

关于fabric .js 使用 可以查看这个地址。里面有各种使用说明。这里我就只给一个案例，其他需要你自己去发挥。

你可能感兴趣的:(canvas)

  • HTML5！进击2025web蓝桥杯复习之路 Deepsleep. html5前端html
    #HTML5全面解析##目录1.[HTML5简介](#1-html5-简介)2.[基本标签](#2-基本标签)3.[新特性](#3-新特性)4.[本地存储](#4-本地存储)5.[总结](#5-总结)---##1.HTML5简介HTML5是HTML的第五个主要版本，2014年由W3C正式发布。主要特性包括：-语义化标签-多媒体支持-图形绘制（Canvas/SVG）-本地存储能力-WebWorker
  • 46-886 Machine Learning Fundamentals W_X_99515681 机器学习人工智能
    46-886MachineLearningFundamentalsHW1Homework1Due:Sunday,March23,11:59pm•UploadyourassignmenttoCanvas(onlyonepersonperteamneedstosubmit)•Includeawriteupcontainingyouranswerstothequestionsbelow(andyourt
  • 炫酷的HTML5粒子动画特效实现详解 木木黄木木 html5前端html
    炫酷的HTML5粒子动画特效实现详解这里写目录标题炫酷的HTML5粒子动画特效实现详解项目介绍技术栈项目架构1.HTML结构2.样式设计核心实现1.粒子类设计2.动画效果实现星空效果烟花效果雨滴效果3.鼠标交互性能优化效果展示总结项目介绍本文将详细介绍如何使用HTML5Canvas技术实现一个炫酷的粒子动画特效系统。该系统包含三种不同的动画效果：星空、烟花和雨滴，并支持鼠标交互功能，能够为网页增添
  • 在WPF中把Canvas保存为图片，文本文件，xps文件 Anticlimax丶 WPFCanvas转图片Canvas转文本文件Canvas转xps文件
    由于wpf的UI使用xaml来表达的，所以我们们可利用这个优点，把WPF中的xaml元素另存为各样的文件，在很多时候我们都不须要这样的操作。把xaml保存为图片、字符串、XPS等等。这里我写了一些方法，以供大家参考.。注意：以下保存操作前，一定要确保参数中的canvas有高和宽。1.把canvas保存为文本文件usingSystem.IO;publicvoidExport(Uripath,Canv
  • WPF把Canvas另存为 baijing7600 ui
    由于wpf的UI使用xaml来表达的，所以我们们可利用这个优点，把WPF中的xaml元素另存为各样的文件，在很多时候我们都不须要这样的操作。把xaml保存为图片、字符串、XPS等等。这里我写了一些方法，以供大家参考.。注意：以下保存操作前，一定要确保参数中的canvas有高和宽。1.把canvas保存为文本文件1:usingSystem.Windows.Markup;2:usingSystem.I
  • 入门 Canvas：Web 绘图的强大工具 Hopebearer_ 前端es6javascriptcanva可画
    文章目录入门Canvas：Web绘图的强大工具一、Canvas简介二、Canvas的基本用法（一）绘制基本图形（二）绘制文本三、Canvas的应用场景（一）数据可视化（二）游戏开发（三）图像编辑四、Canvas的动画效果五、Canvas的优势与局限性（一）优势（二）局限性六、总结入门Canvas：Web绘图的强大工具在Web开发的广阔天地中，为了满足用户对丰富、交互性强的体验的不断追求，前端技术持
  • 探索HTML5 Canvas的无限可能：一个丰富多彩的开源项目 黎情卉Desired
    探索HTML5Canvas的无限可能：一个丰富多彩的开源项目去发现同类优质开源项目:https://gitcode.com/在这个充满活力的数字时代，JavaScript、HTML和CSS已经成为构建互动式网页体验的核心技术。今天，我们向您推荐一个独特而有趣的开源项目，它将这些技术结合在一起，创造出一系列生动活泼的可视化元素，包括时钟、计时器、地图、国际象棋、温度计等，让您在学习和实践中感受HTM
  • 探索HTML5 Canvas：创造动态与交互性网页内容的强大工具 A-Kamen html5前端html
    探索HTML5Canvas：创造动态与交互性网页内容的强大工具引言在HTML5的众多新特性中，Canvas无疑是最引人注目的元素之一。它为网页设计师和开发者提供了一个通过JavaScript和HTML直接在网页上绘制图形、图像以及进行动画处理的画布。Canvas的灵活性和强大功能，使得它成为创造动态、交互性网页内容的首选工具。本文将深入探讨HTML5Canvas的基本用法、应用场景以及如何利用它来
  • 112：vue+cesium 设置镜头光晕效果 还是大剑师兰特 #cesium综合教程200+大剑师cesium教程cesium示例cesium高级CesiumAPI
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第:112`篇文章文章目录一、示例效果图:二、示例介绍三、配置说明四、示例源代码（共171行）五、核心方法
  • HarmonyOS Next--实现炫酷下拉刷新与上拉加载 harmonyos-next
    摘要：本文通过HarmonyOS的PullToRefresh组件，结合Canvas绘图技术，实现具有动态小球特效的下拉刷新与上拉加载功能。文章将详细解析动画绘制原理、手势交互逻辑以及性能优化要点。一、效果预览实现功能包含：弹性下拉刷新：带有透明度渐变的圆形聚合动画波浪加载动画：三个小球按序弹跳的加载效果数据动态加载：模拟异步数据请求与列表更新流畅交互体验：支持列表惯性滑动与边缘回弹二、核心实现原理
  • Cesium中级开发教程之四十一：红黄蓝渐变线 CesiumMaster Cesium开发教程前端javascripthtmlCesium
    一、原理渐变线的本质是沿线段方向进行颜色插值，创建顶点着色器，传递线段的位置或长度信息到片元着色器，创建片元着色器，根据位置或长度计算颜色，实现红→黄→蓝的渐变。二、效果图三、代码functioncreateGradientCanvas(){constcanvas=document.createElement("canvas");canvas.width=256;canvas.height=1;c
  • 关于CanvasRenderer.SyncTransform触发调用的机制
    1）关于CanvasRenderer.SyncTransform触发调用的机制2）小游戏Spine裁剪掉帧问题3）DedicatedServer性能问题4）.mp4视频放入RT进行渲染的性能分析闭坑指南这是第421篇UWA技术知识分享的推送，精选了UWA社区的热门话题，涵盖了UWA问答、社区帖子等技术知识点，助力大家更全面地掌握和学习。UWA社区主页：community.uwa4d.comUWAQ
  • JavaScript 性能优化实战【详细指南】 AI筑梦师 JavaScriptjavascript性能优化开发语言
    #JavaScript性能优化实战#JavaScript性能优化实战JavaScript作为现代Web开发的核心技术，其性能优化涉及多个层面，包括计算效率、DOM操作、异步处理、内存管理、网络请求优化等。随着Web发展，越来越多的新技术（如WebAssembly、OffscreenCanvas、StreamsAPI、V8TurboFan优化等）正在提升JavaScript的性能。本指南涵盖从基础优
  • 实现图片计数功能鸿蒙示例代码
    本文原创发布在华为开发者社区。介绍本项目基于Canvas组件进行图片计数、图片局部涂鸦遮盖、图片局部自动绘制圆圈路径功能实现：支持图片内部圆圈计数，可通过按钮增加或减少已有数值。支持画笔对图片进行局部涂鸦遮盖，可切换画笔颜色以及线条粗细程度，可用橡皮擦功能撤销当前涂鸦路径支持图片局部自动绘制圆圈路径并填充颜色以及数字标识，可调整切换圆圈路径底部颜色实现图片计数功能源码链接效果预览使用说明打开应用，
  • 【宇宙回响】从Canvas到MySQL：飞机大战的全栈交响曲【附演示视频与源码】 果冻kk 小游戏开发mysql音视频数据库前端html5javaspringboot
    这是星际大战系列的第三篇送福利文章，感谢一路以来支持和关注这个项目的每一位朋友！文章力求严谨，但难免有疏漏之处，欢迎各位朋友指出，让我们一起在交流中进步。项目代码、文档和相关资源都可以免费获取，希望能帮助到更多对游戏开发感兴趣的朋友。如果您有任何想法、建议或疑问，都欢迎在评论区留言或通过私信与我交流。您的每一个反馈都是项目进步的动力！文章目录【福利分享】星际大战飞机大战升级版-前后端完整版本前言演
  • 指纹浏览器：隐私保护利器与技术实践指南——从身份隐匿到多账号管理的核心解析 Hotlogin 前端
    一、浏览器指纹：数字身份追踪的底层逻辑浏览器指纹通过收集设备参数（如Canvas渲染特征、字体列表、WebGL硬件信息等）生成用户唯一标识，无需Cookie即可实现精准追踪。根据EFF研究，其识别准确率可达90%以上。▶核心技术解析Canvas指纹：不同设备的抗锯齿算法差异生成唯一哈希值，成为主流追踪手段WebGL指纹：提取GPU驱动版本等硬件信息，构建设备画像环境参数交叉验证：时区、屏幕分辨率、
  • 分享之前使用HarmonyOS NEXT Canvas做的动态GIF视频的一个案例，没有感情，全是技术。 harmonyos-next
    hello，大家好，我是莓创-陈杨。最近忙着改图表组件的BUG，还有定制化开发一些图表。没啥时间写新东西，草稿里面放了十几个要实现的案例分享，欠的实在太多了，后面再慢慢还吧。这次分享一下之前使用HarmonyOSNEXTCanvas做的动态视频的一个案例，没有感情，全是技术。什么！你还不知道我封装了什么图表组件，我不允许你不知道，还不快去看看：莓创开源图表快速地址效果先给大家看一下整体效果开发准备
  • ChatGPT推理模型&通用模型大解析！ 即兴小索奇 ChatGPT&AI人工智能chatgpt
    很多人知道通用模型和推理模型了，那么ChatGPT的哪些模型是通用模型，哪些又是推理模型呢？以下是ChatGPT的所有模型及其分类介绍：通用模型GPT-4：OpenAI的旗舰模型，是一个大型多模态模型，能够比以前的模型更准确地解决困难问题，具有更广泛的通用知识和先进的推理能力。它适用于多种任务，包括聊天、文本生成、内容创作等。GPT-4o系列：包括GPT-4o、GPT-4owithCanvas、G
  • 前端实现页面截图 -- html2canvas 浮桥 前端
    方案：canvaspuppeteer（无头浏览器）html2canvas使用html2canvas实现：考虑：1.截图区域：全页面截图，局部截图、特定区域截图2.函数式、组件式实现代码：页面截图页面截图示例这是一个简单的页面截图示例。截图functionhtml2canvasToImage(dom){//使用html2canvas将页面转换为canvashtml2canvas(dom).then(
  • QML界面卡死分析--01 --Canvas与QRasterPaintEngine 香油哥 Qmlqt
    QML界面卡死分析--01现象—Canvas与QRasterPaintEngine相关前置条件：渲染循环使用多线程方式；发现界面假死，无响应;拷贝dump分析，主线程堆栈如下：#0SyncSemWait()#10x000000007b4f8784inQMutexPrivate::wait(int)()fromqt_engine/qt-engine/lib/libQt6Core.so.6.5.0#2
  • uni-app选择图片进行覆盖然后分享或打印 MandiGao uni-appuni-app前端javascript
    需求：APP上传手机原有的图片，进行覆盖指定的部分，覆盖完成后，唤起原生系统的分享面板，面板上有分享给其他人，还有打印选项准备一个canvas和button标签选择图片这个canvas主要是把选择的图片画上去，所以不知道选的是哪张图片，当然也不知道宽高是多少，所以用的是动态的宽高，这个宽高一定要设置！！！完成事件//选择图片进行裁剪clipImg(){uni.chooseImage({count:
  • 前端大屏触摸签名实现 风无雨 前端前端
    参考：JavaScript实现手写签名，可触屏手写，支持移动端与PC端双端保存_js手写签名-CSDN博客https://www.cnblogs.com/smileZAZ/p/17219400.html1.新建一个canvas元素获取canvas上下文，绘制初始矩形，设置高度宽度，初始绘制位置0,0//创建上下文constctx=canvas.getContext('2d')2.监听touchst
  • 小程序 实现手写签名功能 小星落 小程序javascriptjscanvas小程序
    小程序利用canvas实现手写签名设置小程序横屏在page.json或对应页面.json文件中设置landscape代表固定横屏"pageOrientation":"landscape"手写签名创建canvas画布设置监听触摸开始移动结束等时间此处为uniapp示例原生小程序的也可参考进行修改(只需将@touchmove等事件换为bindtouchmove等微信事件即可)重签完成签名page{ba
  • 移动端Canvas实现手写签名 不知名靓仔 canvas
    引言在移动应用开发中，手写签名功能的集成已经成为许多业务场景的标配，比如电子合同签署、医疗记录确认或是物流配送签收等。本文将详细阐述如何在移动端实现手写签名，包括技术选型、具体实现步骤以及优化建议，帮助开发者快速上手并构建高质量的手写签名体验。技术选型1.使用CanvasAPIHTML5的CanvasAPI提供了在网页上绘制图形的能力，包括路径、文本、图像等，非常适合用来捕捉和展示手写签名。在移动
  • html-to-image的使用及图片变形和无图问题修复 庸懒 前端
    html-to-image的使用及图片变形和无图问题修复最近迭代的时候因为新增了一个需求，需要前端提供素材及样式给后端，后端同步渲染，但是因为部分样式问题后端无法实现所以决定前端将页面生成图片然后传递给后端使用，本文记录一下使用的过程及遇到的部分问题。技术调研现在将页面元素转换成图片的插件有很多，普遍使用的技术原理都是利用canvas或者SVG将页面元素转换成画布或者svg元素，然后再转成图片。这
  • canvas绘制和数字签名 前端
    关键是要把存放绘制的信息放到一个二维数组中：绘制时最好不要用定时器进行定时绘制，因为会卡顿，最好使用requestAnimationFrame这个原生js的api方法，因为是以帧的间隔绘制，所以会看起来流畅Documenthtml,body{height:100%;margin:0;padding:0;}.container{width:100%;padding:20px0;display:fle
  • uniapp中生成视频的第一帧图片 进阶的巨人001 uni-app音视频mp4第一帧封面
    需求页面显示这个视频，封面要求是视频里面的内容，然后点击出现弹窗，视频在弹窗里面播放constvideo_url='.mp4'一.最好用的办法是，直接用背景图二.就是用renderjs了(因为app没有dom)，通过创建video标签，然后通过canvas绘制图片的方式设置链接-->设置链接exportdefault{data(){return{vsrc:{},//用于renderjs通信imgS
  • 【前端拓展】Canvas性能革命！WebGPU + WebAssembly混合渲染方案深度解析 爱上大树的小猪 前端js
    为什么需要混合方案？真实场景痛点分析：传统WebGL在高频数据更新时存在CPU-GPU通信瓶颈JavaScript的垃圾回收机制导致渲染卡顿复杂物理模拟（如SPH流体）难以在单线程中实现技术选型对比：graphLRA[计算密集型任务]-->B[WebAssembly]C[图形渲染任务]-->D[WebGPU]B-->E[共享内存]D-->E️环境搭建全流程1.WebGPU环境配置#启用Chrome
  • 保存画布到本地出现的bug和画布的隐藏 小旋风01234 css小程序
    和隔壁画布隐藏一起，卡了我几个小时…保存相册失败后，再次授权//下载btn(){uni.canvasToTempFilePath({//x:100,//y:200,//width:50,//height:50,//destWidth:100,//destHeight:100,fileType:'jpg',canvasId:'myCanvas',success:function(res){//在H5
  • Unity中WolrdSpace下的UI展示在上层 程序员也有头发 Unity开发unityui游戏引擎
    一、问题描述Unity中Canvas使用WorldSpace布局的UI，想让它不被3d物体遮挡，始终显示在上层。二、解决方案使用shader解决在UI的材质中禁用深度测试（ZTest），强制UI始终渲染在最上层。Shader"Custom/UI_NoDepthTest"{Properties{...}SubShader{Tags{"Queue"="Transparent+1000"//设置高优先级
  • 深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation元注解自定义注解
    一、基本概述     　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。   　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或
  • mysql优化特定类型的查询 annan211 java工作mysql
    本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询 对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看 真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。 在统
  • MAC下安装多版本JDK和切换几种方式 棋子chessman jdk
    环境： MAC AIR,OS X 10.10,64位   历史： 过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。 后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。   在终端中输入jav
  • javaScript （1） Array_06 JavaScriptjava浏览器
    JavaScript 1、运算符 　　运算符就是完成操作的一系列符号，它有七类： 　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
  • 国内顶级代码分享网站 袁潇含 javajdkoracle.netPHP
           现在国内很多开源网站感觉都是为了利益而做的                  当然利益是肯定的,否则谁也不会免费的去做网站      &
  • Elasticsearch、MongoDB和Hadoop比较 随意而生 mongodbhadoop搜索引擎
      IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
  • mac os 系统科研软件总结 张亚雄 mac os
    1.1 Microsoft Office for Mac 2011      大客户版，自行搜索。      1.2 Latex （MacTex）:      系统环境：https://tug.org/mactex/     &nb
  • Maven实战（四）生命周期 AdyZhang maven
    1. 三套生命周期     Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。 每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。 以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post
  • Linux下Jenkins迁移 aijuans Jenkins
    1. 将Jenkins程序目录copy过去      源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面            tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
  • request.getInputStream()只能获取一次的问题 ayaoxinchao requestInputstream
    问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据   原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重
  • 数据库SQL优化大总结之 百万级数据库优化方案 BigBird2012 SQL优化
    网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。 这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
  • jsonObject的使用 bijian1013 javajson
            在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap;
  • [Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper
    Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类     首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher，   /** * Register a watcher for a particular p
  • 【Scala十三】Scala核心七：部分应用函数 bit1129 scala
    何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
  • Tomcat Error listenerStart 终极大法 ronin47 tomcat
    Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码  handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
  • 不用加减符号实现加减法 BrokenDreams 实现
            今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。         分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。    
  • 读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况 把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化 如果在
  • CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA
    调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。 以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！ 所以验证结果的正确性很重要！！！ 在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。 以下程序在K5000GPU上跑的。
  • 诡异的超长时间GC问题定位 chenchao051 jvmcmsGChbaseswap
    HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
  • maven环境快速搭建 daizj 安装mavne环境配置
    一 下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多
  • PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP
    对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
  • yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView
    public function searchWithRelated() {         $criteria = new CDbCriteria;         $criteria->together = true; //without th
  • Java集合对象和数组对象的转换 dyy_gusi java集合
        在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象     最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过
  • nginx同一主机部署多个应用 geeksun nginx
    近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1.   在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts   2.   修改nginx.conf的配置， 在http节点增加下面内容设置，用来包含vhosts里的配置文件 #
  • ubuntu添加admin权限的用户账号 hongtoushizi ubuntuuseradd
    ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd    使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。 顾应该如下操作：  
  • 第五章 常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginxlua
      JSON库   在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成
  • Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timerquartz定时器
    原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时 首先继承jav
  • Linux下df与du两个命令的差别？ pda158 linux
    　一、df显示文件系统的使用情况，与du比較，就是更全盘化。 　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。 　　举比例如以下： 　　[root@localhost ~]# df -T 　　Filesystem                   Type &n
  • [转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VOandroidsqlite反射Cursor
    在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。   使用时需要注意： 考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。 表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中
  • 该学习笔记用到的Employee表 vipbooks oraclesql工作
        这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他